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早 些 年 ，JavaScript 由 于 其 复杂 的 文档 对 象 模 型 (DOM ) 和 不 一 致 的 浏览 器 实现 而 不 受 开 
发 者 的 待 见 。 而 随 着 技术 的 发 展 ，JavaScript 变 得 越 来 越 强大 、 完 善 ， 比 如 ， Ajax 技术 可 以 创 
建 更 加 迷人 的 Web 应 用 ，Node.js 将 JavaScript 的 应 用 范围 扩展 到 了 服务 器 端 ， 各 种 层出不穷 的 
框架 使 得 JavaScript 的 开发 更 加 简捷 ， 尤 其 是 近 几 年 HTML5 的 出 现 ， 将 JavaScript 提 升 到 了 前 
所 未 有 的 高 度 。 如 今 JavaScript 已 经 变 成 了 Web 开 发 必 备 的 语言 ， 甚 至 开始 逐步 向 移动 领域 渗 
透 ， 由 于 JavaScript 的 跨 平 台 特 性 ， 使 得 它 在 移动 互联 网 时 代 可 以 有 更 大 的 作为 。 

JavaScript 是 面向 Web 的 编程 语言 。 绝 大 多 数 现 代 网 站 都 使 用 了 JavaScript， 并 且 所 有 的 
现代 Web 浏 览 器 均 包含 了 JavaScript 解 释 器 。 这 使 得 JavaScript 成 为 使 用 最 广泛 的 编程 语言 之 
一 。JavaScript 也 是 前 端 开 发 工程 师 必 须 掌 握 的 3 种 技能 之 一 : 描述 网 页 内 容 的 HTML、 描 述 网 
页 样式 的 CSS 以 及 描述 网 页 行为 的 JavaScript。 本 书 能 帮助 你 掌握 JavaScript 这 门 语言 。 


本 书 主要 内 容 


JavaScript 是 目前 网 页 设计 中 最 简单 易学 并 且 易 用 的 语言 ， 它 能 让 你 的 网 页 更 加 生动 活 
泼 。 利 用 JavaScript 做 出 的 网 页 特效 ， 能 大 大 提高 网 页 的 可 观 性 ， 增 加 收藏 和 点 击 率 。 

本 书 共 17 章 ， 包 括 JavaScript 基 础 知识 、HTML 基 础 、 数 据 类 型 和 变量 、 表 达 式 与 运算 
符 、JavaScript 程 序 核心 语法 、JavaScript 核 心 对 象 、JavaScript 中 的 事件 、window 对 象 、 屏 幕 
和 浏览 器 对 象 、 文 档 对 象 、 历 史 对 象 和 地 址 对 象 、 表 单 对 象 和 图 片 对 象 、Ajax 基 础 、 导 航 菜单 
特效 案例 、 文 字 和 图 片 特效 案例 、 按 钮 链接 和 页 面 特效 案例 、 广 告 代 码 特效 案例 等 内 容 。 


本 书 主要 特色 


@ 知识 全 面 系统 


本 书 内 容 完 全 从 网 页 创建 的 实际 角度 出 发 ， 内 容 涉及 JavaScript 的 基本 知识 、 高 级 技巧 和 
核心 原理 ， 基 本 涵盖 了 JavaScript 开 发 的 所 有 重要 知识 和 特效 实例 ， 而 且 还 介绍 了 结合 jQuery 
的 实例 、JavaScript 和 CSS 结 合 特效 实例 及 Active 技 术 应 用 等 。 

@ 典型 实例 讲解 

本 书 的 每 章 都 配 有 大 量 实用 案例 ， 这 些 实例 都 来 自 于 实际 的 网 页 开发 实践 ， 实 用 性 非常 
强 ， 读 者 通过 研读 这 些 实例 ， 可 以 系统 地 掌握 JavaScript 的 开发 技术 。 

@ 配合 Dreamweaver 进 行 讲解 

本 书 以 浅显 的 语言 和 详细 的 步骤 介绍 了 在 可 视 化 网 页 软件 Dreamweaver 中 ， 如 何 运用 


@O— 


ws 全会: > 


JavaScript 代 码 来 创建 网 页 ， 使 网 页 制作 更 加 得 心 应 手 。 

@ 配 图 丰富 ， 效 果 直 观 

对 于 每 一 个 实例 代码 ， 本 书 都 配 有 相应 的 效果 图 ， 读 者 无 须 自己 运行 编 
码 ， 也 可 以 看 到 相应 的 运行 结果 或 者 显示 效果 。 在 不 便 上 机 操作 的 情况 下 ， 
读者 也 可 以 根据 书 中 的 实例 和 效果 图 进行 分 析 和 比较 。 

@ 贯穿 大 量 的 开发 技巧 ， 迅 速 提升 开发 水 平 

本 书 在 讲解 实例 时 贯穿 了 大 量 的 网 页 开发 技巧 ， 通 过 对 这 些 技巧 的 掌 
握 ， 可 以 让 读者 掌握 实际 编程 的 捷径 ， 从 而 迅速 提高 开发 水 平 。 

@ 习题 强化 

每 章 后 都 附 有 针对 性 的 练习 题 ， 通 过 实 训 巩固 每 章 所 学 的 知识 。 
本 书 读者 对 象 


网 页 设计 与 制作 人 员 。 

网 站 建设 与 开发 人 员 。 

JavaScript 初 学 者 。 

想 全 面 学 习 JavaScript 开 发 技术 的 人 员 。 

JavaScript 专 业 开发 人 员 。 

JavaScript 开 发 爱好 者 。 

大 中 专 院 校 的 学 生 。 

社会 培训 班 学 员 。 

参加 本 书 编写 的 人 员 包 括 : 刘 贵 国 、 晃 代 远 、 张 连 元 、 晃 辉 、 陈 石 送 、 
何 琛 、 吴 秀 红 、 王 冬 霞 、 何 本 军 、 乔 海 丽 、 邓 仰 伟 、 孙 雷 杰 、 孙 文 记 、 何 
立 、 倪 庆 军 、 胡 秀 娥 、 赵 良 涛 、 徐 晓 、 刘 桂香 、 葛 俊 科 、 葛 俊 彬 等 。 由 于 时 
间 所 限 ， 书 中 朴 漏 之 处 在 所 难免 ， 奶 请 广大 读者 朋友 批评 指正 。 
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第 1 章 
JavaScript 基 础 知识 


本 章 导读 
JavaScript 是 一 种 基于 对 象 
和 事件 驱动 的 客户 端 脚本 语言 。 
JavaScript 最 初 的 设计 是 为 了 检 
验 HTML 表 单 输入 的 正确 性 。 
JavaScript 起 源 于 Netscape 公 司 
的 LiveScript 语 言 。JavaScript 几 
乎 可 以 控制 所 有 常用 的 浏览 器 ， 
而 且 JavaScript 是 世界 上 最 重要 
的 编程 语言 之 一 ， 学 习 Web 技 术 
前 必须 要 学 会 JavaScript。 


技术 要 点 

@ JavaScript 简 介 

@ 在 HTML 中 说 人 JavaScript 的 方法 
@ 第 一 个 JavaScript 程 序 


实例 展示 


JavaScript 网 页 设计 与 网 站 特效 国语 芭 相 二 


在 状态 栏 显示 信息 


| .| 


担心 ， 


不 


JavaScript 简 介 


JavaScript 是 一 种 脚本 语言 ， 比 HTML 要 复杂 。 不 过 即便 不 懂 编 程 ， 也 
为 JavaScript 写 的 程序 都 是 以 源 代码 的 形式 出 现 的 ， 也 就 是 说 如 果 在 一 个 网 页 里 看 到 


一 段 比较 好 的 JavaScript 代 码 ， 恰 好 也 用 得 上 ， 就 可 以 直接 拷贝 ， 然 后 将 其 放 到 网 页 中 去 即 可 。 


骨 1.1.1 JavaScript 的 历史 


JavaScript 是 Netscape 公 司 与 Sun 公 司 合 | 
作 开 发 的 。 在 JavaScript 出 现 之 前 ，Web 浏 览 | 
器 只 能 显示 超 文本 文档 软件 的 基本 部 分 。 而 在 | 
JavaScript 出 现 之 后 ， 网 页 的 内 容 不 再 局 限于 ; 
为 可 交互 性 得 到 了 显著 的 改 | 
善 。JavaScript 的 第 一 个 版 本 ， 即 JavaScript : 
1.0 版 本 ， 出 现在 1995 年 推出 的 Netscape | 


枯燥 的 文本 ， 它 们 


Navigator 2 浏览 器 中 。 


在 JavaScript 1.0 发 布 时 ，Netscape | 


Navigator 主 宰 着 浏览 器 市 场 ， 微 软 的 IE 浏览 


则 扮演 着 追赶 者 的 角色 。 微 软 在 推出 IE3 的 时 候 | 
发 布 了 自己 的 VBScript 语 言 并 以 JScript 为 名 发 | 


布 了 JavaScript 的 一 个 版 本 ， 以 此 很 快 跟 上 了 
Netscape 的 步伐 。 


面 对 微 软 公司 的 竞争 ，Netscape 和 Sun | 


公司 联合 ECMA (欧洲 计算 机 制造 商 协会 ) 
对 JavaScript 语 言 进行 了 标准 化 ， 其 结果 就 是 
ECMAScript 语 言 ， 这 使 得 同一 种 语言 又 多 了 一 
个 名 字 。 虽 说 ECMAScript 这 个 名 字 没 有 流行 开 


来 ， 但 人 们 现在 谈论 的 JavaScript 实 际 上 就 是 ; 


ECMAScript。 

到 了 1996 年 ，JavaScript、ECMAScript、 
JScript 一 一 随便 你 们 怎么 称呼 它 ， 已 经 站 稳 了 
脚跟 。Netscape 和 微软 公司 在 它们 各 自 的 第 3 
版 浏览 器 中 都 不 同 程度 地 提供 了 对 JavaScript 
1.1 语 言 的 支持 。 

这 里 必须 指出 的 是 ，JavaScript 与 Sun 公 司 
| 开发 的 Java 程 序 语 言 没有 任何 联系 。 人 们 最 初 
给 JavaScript 起 的 名 字 是 LiveScript， 后 来 选择 
“JavaScript” 作 为 其 正式 名 称 的 原因 ， 大 概 
是 想 让 它 听 起 来 有 系 出 名 门 的 感觉 ， 但 令 人 遗 
憾 的 是 ， 这 一 选择 反而 更 容易 让 人 们 把 这 两 种 
| 语言 混为一谈 ， 而 这 种 混淆 又 因为 各 种 Web 浏 
i 览 器 确实 具备 这 样 或 那样 的 Java 客 户 端 支持 功 
能 的 事实 被 进一步 放大 和 加 剧 。 事 实 上 ， 虽 说 
;Java 在 理论 上 几乎 可 以 部 署 在 任何 环境 中 ， 但 
i JavaScript 却 只 局 限于 Web 浏 览 器 。 
上 1.1.2 JavaScript 特 点 


mv 


JavaScript 具 有 以 下 语言 特点 。 


序 段 的 方式 实现 编程 ， 也 是 一 种 解释 性 语言 ， 
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@ JavaScript 是 一 种 脚本 编写 语言 ， 采 用 小 程 } 


通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 从 而 有 
效 地 防止 数据 的 丢失 。 


提供 了 一 个 简易 的 开发 过 程 。 它 与 HTML 标 识 ; @ JavaScript 是 动态 的 ， 它 可 以 直接 对 用 户 或 
结合 在 一 起 ， 从 而 方便 用 户 的 使 用 和 操作 。 i ”客户 的 输入 做 出 响应 ， 无 须 经 过 Web 服 务 程 
@ JavaScript 是 一 种 基于 对 象 的 语言 ， 同 时 也 | 。 序 。 它 对 用 户 的 响应 是 采用 以 事件 驱动 的 方式 
可 以 看 作 是 一 种 面向 对 象 的 语言 。 这 意味 着 它 : 。 ”进行 的 。 所 谓 事件 驱动 ， 就 是 指 在 网 页 中 执行 
能 运用 自己 已 经 创建 的 对 象 ， 因 此 它 的 许多 功 | 。 了 某 种 操作 所 产生 的 动作 ， 就 称 为 “事件 ” 
能 可 以 来 自 于 脚本 环境 中 对 象 的 方法 与 脚本 的 ; ”比如 按 下 鼠标 、 移 动 窗口 、 选 择 菜单 等 都 可 以 
相互 作用 。 : 。 视 为 事件 。 当 事件 发 生 后 ， 可 能 会 引起 相应 的 


JavaScript 设 计 


计 ， 其 次 它 的 变量 类 型 采用 弱 类 型 ， 
严格 的 数据 类 型 。 


并 未 使 


问 本 地 硬盘 ， 并 
上 ， 不 允许 对 网 络 文档 进行 修改 和 删除 ， 只 能 


向 单 ， 首 先 它 是 一 种 基于 | 
Java 基 本 语句 和 控制 流 之 上 的 简单 而 紧凑 的 设 | 


JavaScript 是 一 种 安全 性 语言 ， 它 不 允许 访 | 
不 能 将 数据 存 人 到 服务 器 ; 


Mr 


件 响 应 。 
JavaScript 具 有 跨 平台 性 。JavaScript 
是 依赖 于 浏览 器 本 身 的 ， 与 操作 环境 无 关 ， 

只 要 有 能 运行 浏览 器 的 计算 机 ， 并 有 支持 
JavaScript 的 浏览 器 就 可 正确 执行 。 从 而 实 
现 了 “编写 一 次 ， 走 遍 天 下 ”的 梦想 。 


朋 1.1.3 JavaScript 和 Java 的 区 别 


在 各 种 网 页 制作 技术 论坛 中 ， 


认为 JavaScript 就 是 Java。JavaScript 与 Java 


确实 有 一 定 的 联系 ， 但 可 以 肯定 地 说 它们 之 间 ; 


有 很 大 的 
1. 基于 对 象 和 面向 对 象 


区 别 。 


Java 是 SUN 公 司 推出 的 新 一 代 面向 对 象 的 
于 Internet 应 用 程序 开 
Netscape 公 司 的 产品 ， 其 | 
目的 是 为 了 扩展 Netscape Navigator 功 能 而 开 | 
发 的 一 种 可 以 嵌入 Web 页 面 中 的 基于 对 象 和 事 ; 


程序 设计 语言 ， 
发 而 JavaScript 是 


特别 适合 


件 驱 动 的 解释 性 语言 。 
2. 解释 和 编译 


两 种 语言 在 其 浏览 器 中 所 执行 的 方式 不 一 : 


样 。Java 的 源 代码 在 传递 到 客户 端 执 行 之 前 ， 
必须 经 过 编译 ， 


上 的 仿真 器 或 解释 器 ， 它 可 以 通过 编译 器 或 解释 ; 


器 实现 独立 于 某 个 特定 的 平 


台 编 译 代码 的 束缚 。 


JavaScript 是 一 种 解释 性 编程 语言 ， 其 源 代码 
在 发 往 客户 端 执 行 之 前 不 需 经 过 编译 ， 而 是 将 文本 ; 


格式 的 字符 代码 发 送 给 客户 端 由 浏览 器 解释 执行 。 
3. 安全 性 


JavaScript 作 为 网 络 的 脚本 语言 ， 可 以 直 
源 代码 ， 所 以 安全 等 级 不 高 ， 可 以 任 : 


接 查 看 其 


常常 有 人 询 | 
问 JavaScript 与 Java 有 什么 区 别 ， 甚 至 有 人 误 | 


因而 客户 端 上 必须 具有 相应 平台 ; 


意 复制 粘贴 。 而 Java 应 用 在 网 页 的 程式 称 为 
Java Apple， 是 与 HTML 代 码 分 开 的 ， 所 以 安全 
| 性 相对 较 高 。 

4. 强 变量 和 弱 变 量 

JavaScript 与 Java 相 比 ， 结 构 没有 Java 的 严谨 。 

Java 采 用 强 类 型 变量 检查 ， 即 所 有 变量 在 
编译 之 前 必须 声明 ， 如 : 


Integer x; 
String y; 
X=1234; 
y=4321; 


i ”其 中 x=1234 说 明 是 
i 明 是 一 个 字符 串 。 

i ” ”JavaScript 中 的 变量 声明 采用 其 弱 类 型 ， 
i 即 变量 在 使 用 前 不 需 声 明 ， 而 是 解释 器 在 运行 


一 个 整数 ，y=4321 说 


i 时 检查 其 数据 类 型 ， 如 
X=12347 
Y="4321"7 


i 前 者 说 明 x 为 数值 型 变量 ， 而 后 者 说 明 y 为 
i 字符 型 变量 。 

5。 代码 格式 不 一 样 

Java 是 一 种 与 HTML 无 关 的 格式 ， 必 须 通 
i 过 像 HTML 中 引用 外 媒体 那样 进行 装载 ， 其 代 
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码 以 字 节 代码 的 形式 保存 在 独立 的 文档 中 。 | 发 挥 作用 ， 但 它 可 以 控制 浏览 器 ， 让 浏览 器 直 
JavaScript 的 代码 是 一 种 文本 字符 格式 ， 可 以 接 对 文本 和 图 形 进行 处 理 。 而 Java 则 可 以 直接 
直接 嵌入 HTML 文 档 中 ， 并 且 可 动态 装载 。 编 ; 对 文本 和 图 形 进行 操作 。 


写 HTML 文 档 就 像 编 辑 文本 文件 一 样 方便 。 | 可 以 发 现 ，JavaScript 与 Java 虽 然 都 可 以 
6. 对 文本 和 图 形 进行 操作 | 应 用 于 网 页 设计 ， 但 它们 的 确 有 太 大 的 区 别 ， 
JavaScript 不 直接 对 文本 和 图 形 进行 操 ， 根本 就 是 两 种 语言 。 


作 ， 它 在 Web 页 面 中 与 HTML 元 素 组 合 在 一 起 | 


在 HTML 中 同 入 JavaScript 的 方法 o 


@ JavaScript 程 序 本 身 不 能 独立 存在 ， 它 依附 于 某 个 HTML 页 面 ， 在 浏览 
器 端 运行 。JavaScript 本 身 作为 一 种 脚本 语言 可 以 放 在 HTML 页 面 中 的 任何 位 置 ， 但 是 浏览 器 解释 
HTML 时 是 按 先后 顺序 的 ， 所 以 放 在 前 面 的 程序 会 被 优先 执行 。 


上 并 1.2.1” <script/> 使 用 方法 

在 HTML 中 输入 JavaScript 代 码 时 ， 需 要 使 用 <script> 标 签 。 在 <script> 标 签 中 ，language 特 性 
声明 要 使 用 的 脚本 语言 ，language 特 性 一 般 被 设置 为 JavaScript， 不 过 也 可 用 它 声明 JavaScript 的 
确切 版 本 ， 如 JavaScript 1.3。 

当 浏 览 器 载 入 网 页 Body 部 分 的 时 候 ， 就 执行 其 中 的 JavaScript 语 句 ， 执 行 之 后 输出 的 内 容 就 
显示 在 网 页 中 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>JavaScript 语 句 </title> 

</head> 

<body> 

<script type="text/javascriptl1.3"> 


2 

var gt = unescape ('%s3e'); 

Var popup = null; 

Var over = "Launch Pop-up Navigator"; 
popup = window.open(", 'popupnav', Width=225,height=235, resizable=]1,scrollbars=auto); 
if (popup != null) { 

if (popup.opener == null) { 
popup.opener = self; 

} 

popup.1location.href = 'tan.htm'; 

} 

==> 

</script> 

</body> 

</html> 


浏览 器 通常 忽略 未 知 标签 ， 
不 支持 JavaScript 的 浏览 器 阅读 网 页 时 ， 
JavaScript 代 码 也 会 被 阅读 。<!-- --> 里 的 内 容 
对 于 不 支持 JavaScript 的 浏览 器 来 说 就 等 同 
一 段 注释 ， 而 对 于 支持 JavaScript 的 浏览 器 ， 
这 段 代 码 仍然 会 执行 。 


通常 JavaScript 文 件 可 以 使 用 script 标 签 加 载 到 
网 页 的 任何 一 个 地 方 ， 但 是 标准 的 方式 是 加 


载 在 head 标 签 内 。 为 防止 网 页 加 载 绥 慢 ， 也 
可 以 把 非 关键 的 JavaScript 放 到 网 页 底部 。 


肯 1.2.2 外调 脚 本 文件 


如 果 很 多 网 页 都 需要 包含 一 段 相同 的 代码 ， 


最 好 的 方法 是 将 这 个 JavaScript 程 序 放 到 一 个 后 : 
缀 名 为 .js 的 文本 文件 里 。 此 后 ， 任 何 一 个 需要 该 : 


功能 的 网 页 ， 只 需要 引入 这 个 js 文件 就 可 以 了 。 


这 样 做 ， 可 以 提高 JavaScript 的 复 用 性 ， 减 
少 代码 维护 的 负担 ， 不 必 将 相同 的 JavaScript 代 
页 里 ， 将 来 一 旦 程序 有 所 


码 拷贝 到 多 个 HTML 
修改 ， 也 只 要 修改 .js 文件 就 可 以 。 
在 HTML 文 件 中 可 以 直接 输入 JavaScript， 


还 可 以 将 脚本 文件 保存 在 外 部 ， 通 过 <script> 中 
的 src 属 性 指定 URL 来 调用 外 部 脚本 语言 。 外 部 


JavaScript 语 言 的 格式 非常 简单 。 事 实 上 ， 它 们 只 


包含 JavaScript 代 码 的 纯 文本 文件 。 在 外 部 文件 中 
不 需要 <script 户 标签， 引用 文件 的 <script> 标 签 出 


现在 HTML 页 中 ， 此 时 文件 的 后 缀 为 “js”。 


<script type="text/javascript" |; 


src="URL"></script> 


F | 
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因此 在 使 | 


通过 指定 Script 标签 的 src 属 性 ， 就 可 以 使 
| 外 部 的 JavaScript 文 件 了 。 在 运行 时 ， 这 个 js 文 
， 件 的 代码 全 部 嵌入 到 包含 它 的 页 面 内 ， 页 面 程序 
可 以 自由 使 用 ， 这 样 就 可 以 做 到 代码 的 复 


o 


JavaScript 文 件 外 部 调用 的 好 处 如 下 所 述 。 
会 如 果 浏 览 器 不 支持 JavaScript， 将 忽略 script 
标签 里 面 的 内 容 ， 可 以 避免 使 用 <!-…/ 人 >。 


会 统一 定义 JavaScript 代 码 ， 方 便 查看 ， 方 
便 维护 。 

会 使 代码 更 安全 ， 可 以 压缩 、 加 密 单 个 
JavaScript 文 件 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<script src="http://www.baidu.com/ 
common.js"></script> 

</head> 

<body> 

</body> 

</html> 


| ”示例 里 的 common.js 其 实 就 是 一 个 文本 文 
| 件 ， 其 内 容 如 下 : 


function clickme() 

ff 

alert ("You clicked me!") 
} 


国 1.2.3 直接 位 于 事件 处 理 部 分 的 代码 中 


一 些 简单 的 脚本 可 以 直接 放 在 事件 处 理 部 分 的 代码 中 。 如 下 所 示 ， 直 接 将 JavaScript 代 码 加 入 


到 OnClick 事 件 中 。 


<input type="button"name= "FullScreen"” value=" 全 屏 显示 " 


‘onClick="window.open (document .location, ‘big', 'fullscreen=yes')"> 


这 里 ,使 
件 处 理 函 数 ， 即 响应 特定 事件 的 代码 。 


<input/> 标 签 创建 一 个 按钮 ， 单 击 它 时 调 


onclick() 方 法 。onclick 特 性 声明 一 个 事 
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第 一 个 JavaScript 程 序 o 


背景 之 后 ， 


学 习 每 一 门 新 语言 ， 大 致 了 解 了 它 的 最 想 做 的 莫 过 于 先 写 一 


] .3 


个 最 简单 的 程序 并 成 功 运行 它 。 
侦 1.3.1 预备 知识 


常用 的 信息 输出 方法 是 window 对 象 的 alert 方 法 ， 该 方法 以 消息 框 的 形式 输出 信息 。JavaScript 
程序 嵌入 HTML 文 档 的 常用 方式 就 是 将 代码 放 在 “<script>” 标 签 对 中 ， 代 码 如 下 所 示 。 


<!doctype html> 


<html> i HTMI 文 档 开始 -------- 
<head> 1 文档 头 开始 ------- 

<meta charset="utf-8"> <!-————— 设置 文字 字体 -------- 和 
<title> C1 = 标题 开始 三 ======= > 
</title> 区 标题 结束 -------- > 
</head> = 文档 头 结束 ------ > 

<body> <!1---- 文 档 体 开始 ------ > 

<script language="JavaScript"> <!----- 脚本 程序 ---------- > 
alert ("欢迎 进入 我 的 网 页 ") ; // JavaScript 程 序 语句 

Re // 更 多 的 Javascript 程 序 语句 

</script> <!------ 脚本 结束 -一 > 
</body> le=== 寻 簿 体 寻 于 ====== > 

</html> <!----HTML 文 档 结束 ----> 


<script language=“JavaScript”> 代 表 JavaScript 代 码 的 开始 ，</script> 代 表 结 束 。 
JavaScript 代 码 要 放 在 这 个 开始 与 结束 里 面 。alert(“ 欢 迎 进入 我 的 网 页 ”); 这 句 话 是 一 个 真正 的 


JavaScript 语 句 ，alert 代 表 弹 出 一 个 提示 框 ， 


旧 1.3.2” ”JavaScript 编 辑 器 的 选择 


“欢迎 进入 我 的 网 页 ”代表 提示 框 号 


E 面 的 内 容 。 


JavaScript 源 程序 是 文本 文件 ， 因 此 可 以 | 
使 用 任何 文本 编辑 器 来 编写 程序 源 代码 ， 例 如 | 
Windows 操 作 系统 里 的 “记事 本 ”程序 。 为 了 
更 快速 地 编写 程序 并 且 降 低 出 错 的 几率 ， 通 常 | 
会 选择 一 些 专业 的 代码 编辑 工具 。 专 业 的 代码 | 
编辑 器 有 代码 提示 和 自动 完成 功能 ， 在 这 里 使 | 
Dreamweaver CC， 它 是 一 款 很 不 错 的 代码 | 
编辑 器 ， 如 图 1-1 所 示 。 


| 
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用 1.3.3 编写 Hello World 程 序 
本 节 编 写 并 
将 文件 另存 为 网 页 文件 helloworld.htm 。 


已 二 
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图 1-1 JavaScript 代 码 编辑 器 


运行 最 经 典 的 入 门 程序 ， 输 出 “Hello World!”。 打 开 记 事 本 ， 输 入 如 下 代码 ， 并 
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i language=“javascript”> 和 </script> 是 标准 


<!doctype html> | 
; HTML 标签 ， 该 标签 用 于 在 HTML 文 档 中 插入 脚 


<html1> ! 
Snes :本 程序 。 其 中 的 language 属 性 指明 了 <script> 
<meta charset="utf-8"> | 标签 对 间 的 代码 是 JavaScript 程 序 。 最 后 调 
<title>Javascript</title> document 对 象 的 write 方法 将 字符 串 “Hello 
</head> : World! ”输出 到 HTML 文 本 流 中 。 预 览 程序 效 
<body> | 果 ， 如 图 1-2 所 示 。 


! er 


<script language="javascript"> 


document .write ("<hl>Hello World! </ | 
h1>") | | 

</script> | 

</body> 

</html> 


Hello World! 


document.write( “<h1>Hello World! : 


</h1>”) 是 JavaScript 程 序 代码 ，<script | 一 ne 2 一 
! 图 1-2 运行 程序 效果 


上 并 1.3.4 浏览 器 对 JavaScript 的 支持 

在 互联 网 发 展 的 过 程 中 ， 几 大 主要 浏览 器 之 间 也 存在 激烈 的 竞争 。JavaScript 是 Netscape 公 
司 的 技术 ， 其 他 浏览 器 并 不 能 和 Navigator 一 样 良 好 地 支持 JavaScript， 因 为 得 不 到 使 用 许可 。 微 
软 公 司 为 能 使 其 上 E 浏 览 器 抢占 一 定 市 场 份额 ， 于 是 在 IE 中 实现 了 称 为 JScript 的 脚本 语言 ， 其 兼容 
JavaScript， 但 是 和 JavaScript 间 仍然 存在 版 本 差异 。 因 此 ， 编 程 人 员 在 编码 时 仍然 需要 考虑 不 同 
浏览 器 间 的 差别 。 

JavaScript 包 含 一 个 名 为 Navigator 的 对 象 ， 它 就 可 以 完成 上 述 的 任务 。Navigator 包 含 了 
有 关 访 问 者 浏览 器 的 信息 ， 包 括 浏览 器 类 型 、 版 本 等 。 下 面 通过 实例 讲述 ， 代 码 如 下 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<body> 

<script type="text/javascript"> 

Var browser=navigator.appName 

Var b version=navigator.appVersion 

Var version=parseFloat (b_version) 
document .write ("Browser name: "+ browser) 
document .write ("<br />") 
document .write ("Browser version: "+ version) 
</script> 

</body> 

</html> 
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上 面 例子 中 的 browser 变 量 存 有 浏览 器 的 名 称 ， 比 如 Netscape 或 者 Microsoft Internet Explorer。 
上 面 例子 中 的 appVersion 属 性 返回 的 字符 串 所 包含 的 信息 不 止 是 版 本 号 ， 但 是 现在 我 们 只 关 
版 本 号 。 我 们 使 用 一 个 名 为 parseFloat() 的 函数 会 抽取 字符 串 中 类 似 十 进 制 数 的 一 段 字符 并 将 之 


岗 说 


本， 这 样 我 们 就 可 以 从 字符 串 中 抽出 版 本 号 的 信息 了 。 


实战 应 用 一 一 浏 | 览 器 状态 栏 显示 


@ JavaScript 是 基于 对 象 和 事件 驱动 并 具有 相对 安全 性 的 客户 端 脚本 语 
言 。 同 时 也 是 一 种 广泛 用 于 客户 端 Web 开 发 的 脚本 语言 。 本 章 主要 介绍 了 JavaScript 基 础 知识 ， 下 
讲述 一 个 在 浏览 器 状态 栏 中 显示 信息 的 实例 ， 具 体操 作 步 骤 如 下 所 述 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 1-3 所 示 。 
(2) 在 <head> 和 </ head> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 1-4 所 示 。 


Dw ym wa mo sro ow wm 
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图 1-3 打开 网 页 文档 图 1-4 输入 代码 


<script language="javascript"> 

Var Yourwordsl = "欢迎 光临 !"; // 定义 显示 文本 1 
var yourwords2 =" 锦 颐 假日 酒店 !"; // 定义 显示 文本 2 
var speed = 1500; 

var control = true; 

function fash() 

if (control == true) 

{ 

window.status=yourwords1; 

control=false; 

} 

else 

{ 

window.status=yourwords2; 

control=true; 

} 

setTimeout ("flash ()", speed); 

} 

</script> 
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(3) 在 <body> 标 记 内 输入 代码 onload=flash()， 用 于 当 加 载 网 页 文档 时 调用 flash() 函 数 ， 如 
1-5 所 示 。 
(4) 保存 文档 ， 在 浏览 器 中 预览 效果 ， 文 本 1 和 文本 2 交替 出 现 ， 如 图 1-6 所 示 。 
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洽 扩 上司 未 和 也 虽 避 | 症 加 李 | 会 二 


图 1-5 输入 代码 本 图 1-6 预览 效果 
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1. 填空 题 

(1) JavaScript 是 一 种 脚本 语言 ， 比 HTML 要 复杂 。 不 过 即便 不 懂 编 程 ， 也 不 用 担心 ， 
为 JavaScript 写 的 程序 都 是 以 _ 的 形式 出 现 的 ， 也 就 是 说 在 一 个 网 页 里 看 到 一 段 比较 好 的 
JavaScript 代 码 ， 恰 好 也 用 得 上 ， 就 可 以 直接 拷贝 ， 然 后 将 其 放 到 网 页 中 去 。 

(2) 如 果 很 多 网 页 都 需要 包含 一 段 相 同 的 代码 ， 最 好 的 方法 是 将 这 个 JavaScript 程 序 放 到 一 


个 后 缀 名 为 的 文本 文件 里 。 

(3) 常用 的 信息 输出 方法 是 使 用 window 对 象 的 方法， 该 方法 以 消息 框 的 形式 输出 
信息 。 

2. 操作 题 


制作 一 个 简单 的 JavaScript 弹 出 窗口 ， 如 图 1-7 所 示 。 


| 于 | 
图 1-7 ”JavaScript 弹 出 窗口 


第 2 章 
HTML 基 础 


本 章 导 读 

HTML 是 一 种 网 络 通用 语言 ， 它 允许 
网 页 制作 人 建立 文本 与 图 片 相 结 合 的 复杂 
页 面 ， 这 些 页 面 可 以 被 网 上 任何 其 他 人 浏 
览 到 ， 一 个 优秀 的 网 页 设计 者 应 该 在 掌握 
可 视 化 编辑 工具 的 基础 上 ， 进 一 步 熟 悉 
HTML 语 言 以 便 清除 那些 垃圾 代码 ， 从 而 
达到 快速 制作 高 质量 网 页 的 目的 。 这 就 需 
要 对 HTML 有 个 基本 的 了 解 ， 因 此 具备 一 
定 的 HTML 语 言 的 基本 知识 是 必要 的 。 


技术 要 点 
HTML 语 言 概述 a 
HTML 标 签 一 
HTML 格 式 标 签 

HTML 文 本 标签 

HTML 超 链接 标签 

HTML 图 像 标签 

HTML 表 格 标签 

HTML 框 架 标签 

HTML 表 单 标签 


9 
Le) 
9 
9 
9 
9 
@ 
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实例 展示 
Ge ee [rs 
设置 表格 的 表 主 体 的 效果 二 
:五 二 \ 直 
HTML 语 言 概 述 
@ Hypertext Markup Language， 即 超 文 本 链接 标示 语言 。HTML 即 超 
文本 标记 语言 ， 是 WWW 的 描述 语言 。 设 计 HTML 语 言 的 目的 是 为 了 能 把 存放 在 一 人 台电 脑 中 的 文 


本 或 图 形 与 另 一 台电 脑 中 的 文本 或 图 形 方便 地 联系 在 一 起 ， 形 成 有 机 的 整体 ， 人 们 不 用 考虑 具体 
信息 是 在 当前 电脑 上 还 是 在 网 络 的 其 他 电脑 上 。 我 们 只 需 使 用 鼠标 在 某 一 文档 中 选取 一 个 图 标 ， 
Internet 就 会 马上 转 到 与 此 图 标 相 关 的 内 容 上 去 ， 而 这 些 信 息 可 能 存放 在 网 络 的 另 一 台电 脑 中 。 
HTML 文 本 是 由 HTML 命 令 组 成 的 描述 性 文本 ，HTML 命 令 可 以 说 明文 字 、 图 形 、 动 画 、 声 音 、 表 
格 、 链 接 等 。HTML 的 结构 包括 头 部 〈Head) 、 主 体 (Body) 两 大 部 分 ， 其 中 头 部 描述 浏览 器 所 


需 的 信息 ， 而 主体 则 包含 所 要 说 明 的 具体 内 容 。 
旧 2.1.1 HTML 概述 


上 网 冲浪 〈 即 浏览 网 页 时， 呈现 在 人 
们 面前 的 一 个 个 漂亮 的 页 面 就 是 网 页 ， 是 网 ; 
络 内 容 的 视觉 呈现 。 网 页 是 怎样 制作 的 呢 ? 其 
实 网 页 的 主体 是 一 个 用 HTML 代 码 创建 的 文本 | 
文件 ， 使 用 HTML 中 的 相应 标签 ， 就 可 以 将 文 ; 
| 编辑 器 就 可 以 完成 。 


本 、 图 像 、 动 画 及 音乐 等 内 容 包含 在 网 页 中 ， 


再 通过 浏览 器 的 解析 ， 多 姿 多 彩 的 网 页 内 容 就 | 
: 地 在 网 络 环境 下 传输 与 显示 。 


呈现 出 来 了 。 


HTML 的 英文 全 称 是 Hyper Text Markup | 
Language， 中 文通 常 称 作 超 文本 标记 语言 或 超 | 
文本 标签 语言 ，HTML 是 Internet 上 用 于 编写 网 : 
页 的 主要 语言 ， 它 提供 了 精简 而 有 力 的 文件 定 | 
义 ， 可 以 设计 出 多 姿 多 彩 的 超 媒体 文件 ， 通 过 
HTTP 通 讯 协议 ， 使 得 HTML 文 件 可 以 在 全 球 互 | 
联网 (World Wide Web) 上 进行 跨 平 全 的 文件 | 
i 取 子 类 元 素 的 方式 ， 为 系统 扩展 带 来 保证 。 


交换 。 


1. HTML 的 特点 

HTML 文 档 制 作 简单 且 功能 强大 ， 支 持 不 
同 数据 格式 的 文件 导入 ， 这 也 是 WWW 盛 行 的 
原因 之 一 ， 其 主要 特点 如 下 。 

(1) HTML 文 档 容易 创建 ， 只 需 一 个 文本 


(2) HTML 文 件 存 贮 量 小 ， 能 够 尽 可 能 快 


(3) 平台 无 关 性 。HTML 独 立 于 操作 系统 平 
合 ， 它 能 对 多 平台 兼容 ， 只 需要 一 个 浏览 器 ， 就 
能 够 在 操作 系统 中 浏览 网 页 文件 。 可 以 使 用 在 广 
泛 的 平台 上 ， 这 也 是 WWW 盛 行 的 另 一 个 原因 。 

(4) 容易 学 习 ， 不 需要 很 深 的 编程 知识 。 

(5) 可 扩展 性 ，HTML 语 言 的 广泛 应 用 带 
来 了 加 强 功能 ， 增 加 标识 符 等 要 求 ，HTML 采 


ET ML 基础 
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2.HTML 的 历史 


HTML 1.0 一 一 1993 年 6 月 ， 互 联网 工程 工作 小 组 〈IETF) 工作 草案 发 布 。 


HTML 2.0 一 一 1995 年 11 月 发 布 。 

HTML 3.2 一 一 1996 年 1 月 W3C 推 荐 标准 。 
HTML 4.0 一 一 1997 年 12 月 W3C 推 荐 标准 。 
HTML 4.01 一 一 1999 年 12 月 W3C 推 荐 标准 。 
HTML 5.0 一 一 2008 年 8 月 W3C 工 作 草 案 。 


国 2.1.2 HTML 文档 结构 
HTML 的 任何 标签 都 由 “<” 夭 


“>” 围 起 | 
来 ， 如 <HTML>。 在 起 始 标签 的 标签 名 前 加 上 符 | 


这 一 段 代码 是 由 HTML 中 最 基本 的 几 个 标 
签 所 组 成 的 ， 运 行 代码 并 在 浏览 器 中 预览 有 


号 “/” 便 是 其 终止 标签 ， 如 <HTML>， 夹 在 起 始 ; 
标签 和 终止 标签 之 间 的 内 容 受 标签 的 控制 。 超 文 ; 属 
本 文档 分 为 头 和 主体 两 部 分 ， 在 文档 头 部 ， 对 文 | 
档 进行 了 一 些 必要 的 定义 ， 文 档 主体 是 要 显示 的 | 


各 种 文档 信息 。 
基本 语法 : 
<html> 
<head> 网 页 头 部 信息 </head> 
<body> 网 页 主体 正文 部 分 </body> 
</html> 


语法 说 明 : 


括 文档 的 头 部 信息 ， 如 文档 标题 等 ， 


省 略 ， 用 于 表示 正文 内 容 的 开始 。 


悉 HTML 文 件 的 结构 。 
实例 代码 


<!doctype html> 

<html > 

<head> 

<meta charset="utf-8"> 
<title>HTML 文 档 结构 </title> 
</head> 

<body> 

<p>HTML 文 档 结构 </p> 

</body> 

</html> 


HE Nan re 


| @ 在 <body> 和 </body> 标 签 之 间 的 文本 是 正 


果 ， 如 图 2-1 所 示 。 
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图 2-1 HTMI 文 件 结构 


| @ HTML 文 件 就 是 一 个 文本 文件 。 文 本 文件 的 后 
其 中 <html> 在 最 外 层 ， 表 示 这 对 标签 间 : 
的 内 容 是 HTML 文 档 ， 一 个 HTML 文 档 总 是 以 | 
<html> 开 始 ， 以 </html> 结 束 。<head> 之 间 包 | 
若 不 需 头 | 
部 信息 则 可 省 略 此 标签 。<body> 标 签 一 般 不 能 | 


绎 名 是 .txt， 而 HTML 的 后 绎 名 是 .html。 

@ <ldoctype html> 代 表 文档 类 型 。 

@ HTML 文档 中 ， 第 一 个 标签 是 <html>， 这 个 标 
签 告诉 浏览 器 这 是 HTML 文 档 的 开始 。 

@ HTML 文 档 的 最 后 一 个 标签 是 </html> ， 这 个 
标签 告诉 浏览 器 这 是 HTML 文 档 的 终止 。 


二 而 大 WU 处 全 放风 WE 交 生 次 而 二 @ UTF-8， 如 果 你 的 页 面 全 是 简体 中 文 ， 可 以 写 


成 GB2312， 但 是 一 般 使 用 UTF-8 字符 集 保 
险 点 ， 因 为 不 能 保证 任何 浏览 页 面 的 人 的 计算 
机 都 是 安装 的 简体 中 文 版 的 操作 系统 ， 所 以 为 
了 通用 起 见 还 是 用 UTF-8。 


| @ 在 <head> 和 </head> 标 答 之 间 的 文本 是 头 


信息 ， 在 浏览 器 窗口 中 ， 头 信息 是 不 被 显示 在 


页 面 上 的 。 


| @ 在 <title> 和 </title> 标 签 之 间 的 文本 是 文档 


标题 ， 它 被 显示 在 浏览 器 窗口 的 标题 栏 。 


文 ， 会 被 显示 在 浏览 器 中 。 


| @ 在 <p> 和 </p> 标 签 代表 段落 。 


2.2 


编写 HTML 文 件 时 ， 


必须 遵循 一 定 的 语法 规则 。 
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一 个 完整 的 HTML 文 件 


由 标题 、 段 落 、 表 格 和 文本 等 各 种 嵌入 的 对 象 组 成 ， 这 些 对 象 统称 为 元 素 。HTML 使 用 标签 来 分 隔 


并 描述 这 些 元 素 ， 整 个 HTML 文 件 其 实 就 是 由 元 素 与 标签 组 成 的 。 
上 2.2.1 课堂 小 实例 一 一 头 部 标签 <head>…</head> 


<head> 标 签 用 于 定义 文档 的 头 部 ， 它 是 
览 器 在 哪里 找到 样式 表 、 提 供 元 信息 等 。 
Web 中 的 位 置 以 及 和 其 他 文档 的 关系 等 。 
基本 语法 : 


<head>.…..</head> 


语法 说 明 : 


定义 在 HTML 语 言 头 部 的 内 容 都 不 会 在 网 } 


页 上 直接 显示 ， 而 是 通过 另外 的 方式 起 作用 。 
实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 档 头 </title> 
</head> 

<body> 

文档 正文 

</body> 


用 2.2.2 
<title> 元 素 可 定义 文档 的 标题 。 


在 浏览 器 窗口 的 标题 栏 或 状态 栏 上 。 同 样 ， 当 


把 文档 加 入 用 户 的 链接 列表 或 者 收藏 夹 或 书签 : 


列表 时 ， 标 题 将 成 为 该 文档 链接 的 默认 名 称 。 


在 网 页 中 设置 网 页 的 标题 ， 只 要 在 HTML 文 ; 
件 的 头 部 文件 的 <title></title> 中 输入 标题 信息 就 | 


可 以 在 浏览 器 上 显示 。 标 题 标记 以 <title> 开 始 ， 
以 </title> 结 束 。 

基本 语法 : 

<head> 


<title>..</title> 
过 </head> 


所 有 头 部 元 素 的 容器 。<head> 中 的 元 素 可 以 引用 脚本 、 指 示 浏 
文档 的 头 部 描述 了 文档 的 各 种 属性 和 人 信息， 包括 文档 的 标题 、 在 
绝 大 多 数 文档 头 部 包含 的 数据 都 不 会 真正 作为 内 容 显 示 给 读者 。 


HTML 也 有 多 个 不 同 的 版 本 ， 只 有 完全 


| 明白 页 面 中 使 用 的 确切 HTML 版 本 ， 浏 览 器 
; 才能 完全 正确 地 显示 出 HTML 页 面 。 这 就 是 <! 


: doctype > 的 用 处 。 

: <! doctype E> 不 是 HTML 标 签 。 它 为 浏览 
i 器 提供 一 项 信息 (声明 ) ， 即 HTML 是 用 什么 版 
| 本 编写 的 。 

: 实例 代码 : 


<!doctype html> 


| <! doctype > 声明 位 于 文档 中 的 最 前 面 的 位 
| 置 ， 处 于 <html> 标 签 之 前 。 
| 器 文档 使 用 哪 种 HTML 或 XHTML 规 范 。 


此 标签 可 告知 浏览 


课堂 小 实例 一 一 标题 标签 <title>…</title> 
浏览 器 会 
以 特殊 的 方式 来 使 用 标题 ， 2 : 


语法 说 明 : 

页 面 的 标题 只 有 一 个 ， 它 位 于 HTML 文 档 
; 的 头 部 ， 即 在 <head> 和 </head> 之 间 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 新 天 地 搬家 公司 </title> 
</head> 

<body> 

</body> 

</html> 
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HTML 标 签 


JavaScript 网 页 设计 与 网 站 特效 国语 芋 相 二 
在 代码 中 加 粗 部 分 的 代码 标记 “<title> 新 | 


天 地 所 家 公司 <ltitle>” 为 设置 网 页 的 标题 ， 在 | == [er 
浏览 器 中 预览 效果 ， 可 以 在 浏览 器 标题 栏 上 看 ; 
eee 如 图 2-2 所 示 。 : 


了 解 了 网 站 标题 的 重要 性 之 后 ， 下 面 看 下 如 何 
来 设置 网 站 标题 。 首 先 应 该 明确 网 站 的 定位 ， | ， 
希望 对 嘱 类 词 感 兴趣 的 用 户 能 够 通过 搜索 引擎 | ， CE 


来 到 我 们 的 站 点 ， 在 经 过 关键 字 调 研 之 后 , 选 | ， 村 本 
择 几 个 能 带 来 不 菲 流量 的 关键 字 ， 然 后 把 最 具 | | 
代表 性 的 关键 字 放 在 title 的 最 前 面 。 
转 2.2.3 课堂 小 实例 一 索引 标签 <isindex> 
索引 标记 元 素 告 知 Web 浏 览 器 该 页 面 是 | 实例 代码 : 
一 个 可 检索 的 索引 文档 。 该 索引 文档 是 一 种 交 ee 
互 式 的 页 面 ， 允 许 用 户 输入 检索 规则 以 检索 数 | es 
据 库 ， 要 求 你 所 用 的 Web 服 务 器 能 提供 检索 机 ; <head> 
制 。 如 果 服 务 器 不 提供 检索 机 制 ， 必须 自己 创 | <meta charset="utf-8"> 
建交 互 式 页 面 ， 读 入 关键 字 ， 检 索 数据 库 ， 并 | <title> 无 标题 文档 </title> 
且 将 检索 结果 显示 给 用 户 。 /head> 
语法 说 明 : | <body> 
Common:， 一 般 属 性 。 <isindex prompt="search from dreamdu'> 
prompt: 提交 输入 框 说 明文 字 。 : </body> 
: </html> 


上 朋 2.2.4 主体 标签 <body>…</body> 

<body> 和 </body> 之 间 的 内 容 为 HTML 页 面 的 主体 内 容 ， 也 就 是 需要 显示 的 内 容 。HTML 文 档 
的 所 有 内 容 应 该 全 部 放 在 此 标签 中 ， 比 如 浏览 器 所 能 表现 的 文字 、 图 像 、 链 接 等 。<body> 标 签 有 
自己 的 属性 ， 设 置 <body> 标 签 内 的 属性 ， 可 控制 整个 页 面 的 显示 方式 。 

实例 代码 : 

<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 主 体 标签 </title> 
</head> 

<body> 

<p>body 是 主体 标签 </p> 
<p>title 元 素 是 浏览 器 的 标题 </p> 
</body> 

</html> 
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有 2.2.5 课堂 小 实例 一 一 特殊 字符 


在 网 页 中 除了 可 以 输入 汉字 、 英 文 和 其 他 | (2) 在 版 权 符号 后 面 输入 代码 “<p> 注 册 
语言 外 ， 还 可 以 输入 一 些 空格 和 特殊 字符 , 如 ; i 商标 符号 &reg;</p>”， 用 以 显示 注册 商标 符 
¥、$、Q、# 等 。 i 号 ,效果 如 图 2-4 所 示 。 

基本 语法 | 

&amp; .….&COPY? | . 上 

语法 说 明 : :BE 

在 需要 添加 特殊 符号 的 地 方 添加 相应 的 符号 ; 9 
代码 即 可 。 常 用 符号 及 其 对 应 代码 如 表 2-1 所 示 。 | 3 

表 2-1 常用 符号 及 对 应 代码 
特殊 符号 符号 的 代码 # 
本 &quot; | 
& &amp; ! - 
E at i 图 2-3 版 权 符 号 
&gt; 1 ER 
x &times,; | 
§ &sect > 版 相符 号 
© &copy; 注册 商标 符号 @ 
® &reg; 
od &trade; 


在 Dreamweaver 中 编写 特殊 字符 的 代码 的 
具体 操作 步骤 如 下 。 | 
(1) 打开 Dreamweaver CC 软件 ， 新 建 空 : 
文档 ， 在 body 中 输入 代码 “<p> 特 殊 字符 版 权 符号 ; ， 


&reg;<lp>”， 用 以 显示 版 权 符号 ， 如 图 2-3 所 示 。 - wr 
: 图 2-4 注册 商标 符号 


) 3 EE 


在 网 页 制作 的 过 程 中 ， 将 一 段 文字 分 成 相应 的 段落 ， 不 仅 可 以 增加 网 页 
的 美观 性 ， 而 且 使 网 页 层次 分 明 ， 让 浏览 者 感觉 不 到 拥挤 ， 在 网 页 中 如 果 要 把 文字 有 条 理 地 显示 
出 来 ， 离 不 开 段落 标记 的 使 用 。 在 HTML 中 可 以 通过 标记 实现 段落 的 效果 。 


国 2.3.1 课堂 小 实例 一 一 段落 标签 <p> 
为 了 排列 的 整齐 、 清 晰 ， 在 文字 段落 之 间 ， 常 用 <P></P> 来 做 标记 。 文 件 段 落 的 开始 由 <P> 来 标 
记 ， 段 落 的 结束 由 </P> 来 标记 ，</P> 是 可 以 省 上 略 的 ， 因 为 下 一 个 <P> 的 开始 就 意味 着 上 一 个 <P> 的 结束 。 
基本 语法 : 
<p> 段 落 文 字 <p> 
语法 说 明 : 
段落 标记 可 以 没有 结束 标记 <4p>， 而 每 一 个 新 的 段落 标记 开始 的 同时 也 意味 着 上 一 个 段落 的 结束 。 
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实例 代码 : : 在 代码 中 加 粗 部 分 的 代码 标记 <p> 为 段落 
<!doctype html> : 标记 ，<p> 和 </p> 之 间 的 文本 是 一 个 段落 ， 效 
<html> 地 党 加 上 

<head> | —— 


<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

登 蕉 省 楼 <P> 白 日 依 山 尽 ，<bzr> 黄 河 入 海流 。 
<br> 欲 穷 千里 目 ，<br> 更 上 一 层 楼 。</P> 

</body> 

</html> 


轩 2.3.2 ”课堂 小 实例 一 一 换行 标签 <br> 

在 HTML 文 本 显示 中 ， 默 认 是 将 一 行文 字 连 续 地 显示 出 来 ， 如 果 想 把 一 个 句子 后 面 的 内 容 在 
下 一 行 显示 就 会 用 到 换行 符 <br>。 换 行 符 号 标签 是 个 单 标签 ， 于 标签 ， 不 包含 任何 内 容 ， 在 
HTML 文 件 中 的 任何 位 置 只 要 使 用 了 <br> 标 答 ， 当 文件 显示 在 浏览 中 时 ， 该 标签 之 后 的 内 容 将 在 
下 一 行 显示 。 

基本 语法 : | 在 代码 中 加 粗 部 分 的 代码 标记 <br> 为 设置 
| ， 换 行 标记 ， 在 浏览 器 中 预览 可 以 看 到 换行 的 
| 效果 ， 如 图 2-6 所 示 。 


语法 说 明 : : 
一 个 <br> 标 记 代表 一 个 换行 ， 连 续 的 多 个 ; 
标记 可 以 实现 多 次 换行 。 : 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> | i 和 

ea 图 2-6 换行 效果 

<body> 

"孩子 做 事 拖 消 ， 家 长 该 怎么 办 "。 br> 当 孩子 | 
表现 出 拖拉 的 行为 时 ， 家 长 需要 及 时 指出 来 : <br> 
而 每 当 孩 子 表现 出 动作 迅速 、" 当 日 事 当日 毕 "时 , 家 :| . RR 
长 需要 及 时 地 给 予 肯 定 和 表扬 ， 强 化 孩子 的 好 习惯。 ，| 记 如 <p>， 可 以 为 文字 分 段 

</body> 

</html> 


现 册 动作 于 如 、 ee 和 强化 防 


<br> 是 唯一 可 以 为 文字 分 行 的 方法 。 其 他 标 


上 2.3.3 ”课堂 小 实例 一 一 缩 进 标签 <blockquote> 
<blockquote>…</blockquote> 标 签 对 为 缩 进 标签， 在 浏览 器 中 显示 向 右 缩 进 的 文字 。 在 标签 对 之 间 
加 入 的 文本 将 会 在 浏览 器 中 显示 的 效果 与 在 普通 的 文本 中 使 用 Tab 键 进行 缩 进 的 效果 一 样 。 
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基本 语法 : 
<blockquote> 要 缩 排 的 文字 </blockquote> 
语法 说 明 : 
<blockquote> 与 </blockquote> 之 间 的 所 有 文本 都 会 从 常规 文本 中 分 离 出 来 ， 经 常会 在 左 、 右 

两 边 进行 缩 进 〈 增 加 外 边 距 ) ， 而 且 有 时 会 使 用 和 斜体。 也 就 是 说 ， 块 引用 拥有 它们 自己 的 空间 。 

实例 代码 : 
<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<blockquote> 

<P> 生 命 的 年 轮 已 将 我 带 进 了 人 生 的 金秋 。 人 到 中 年 ， 心 灵 少 了 几 分 躁动 ， 多 了 几 分 宁静 。 幼 稚 的 梦境 ， 
昨天 的 辉煌 ， 纵 然 过 去 却 也 从 容 淡 静 ， 因 为 这 些 已 经 雕刻 在 美好 的 记忆 之 中 ， 会 伴随 并 丰富 着 今生 。</P> 


</blockquote> 
</body> 
</html> 
在 代码 中 加 粗 部 分 的 代码 标记 <p> 为 段落 标 LE ee 
记 ，<p> 和 </p> 之 间 的 文本 是 一 个 段落 ， 效 果 如 ; | - 
re | | 
于 计算 只 | 保 六 模式: 共用 站 成 100% = 


图 2-7 段落 效果 


国 2.3.4 课堂 小 实例 一 一 预 格式 化 标签 <pre> 

在 HTML 文 档 中 ， 有 时 候 设计 者 需要 按照 自己 的 格式 编写 源 文件 ， 并 且 希 望 在 浏览 器 中 显示 的 
格式 和 编辑 时 的 格式 相同 。<pre>…</pre> 标 签 对 可 以 完整 保留 设计 者 在 源 文件 中 所 定义 的 格式 ， 包 
括 各 种 空格 、 缩 进 ， 以 及 其 他 特殊 格式 ， 全 都 原封 不 动 地 反映 在 浏览 器 页 面 上 。 

基本 语法 : 

<pre> 内 联 元 素 </pre> 

语法 说 明 : 

pre 是 Preformatted text( 预 格式 化 文本 ) 的 缩写 。 使 用 此 标签 可 以 把 代码 中 的 空格 和 换行 直 
榜 显 示 到 页 面 上 。 但 是 <、> 和 & 等 特殊 文字 需要 用 &lt;、&gt; 和 &amp; 的 方式 记述 。 


加 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<pre> 

i (xx qt; SY { 
print " 比 5 大 ! \n"7 

By 

</pre> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 pre 为 段落 标 


| 记 ，<pre> 和 </pre> 之 间 代 码 是 一 个 函数 ， 效 果 


| 如 图 2-8 所 示 。 


天 寺 耻 册 | 全 志 各 用 ”二 100% 


图 2-8 预 格式 化 标签 


) A TS 
@ 


HTML 的 文本 相关 标签 文本 是 网 页 不 可 缺少 的 元 素 之 一 ， 是 网 页 发 布 信 
息 所 采用 的 主要 形式 。 为 了 让 网 页 中 的 文本 看 上 去 编排 有 序 、 整 齐 美观 、 错 落 有致， 我 们 就 要 设 


置 文本 的 大 小 、 颜 色 、 字 体 类 型 以 及 换行 换 段 等 


o 


由 2.4.1 课堂 小 实例 一 一 标题 标签 


标题 能 分 隔 大 段 文字 ， 概 括 下 文 内 容 ， 根 | 
据 逻 辑 结 构 安 排 信息 。 标 题 具有 吸引 读者 的 提 ; 
示 作用 ， 而 且 表明 了 文章 的 内 容 ， 读 者 会 根据 | 
标题 决定 是 否 阅读 此 文章 。 标 题 的 重要 性 由 此 | 
可 见 一 斑 。HTML 提 供 了 六 级 标题 ，<H1> 为 最 ; 
大 ，<H6> 为 最 小 。 用 户 只 需 定义 从 H1 到 H6 中 | 


的 一 种 大 小 ， 浏 览 器 将 负责 显示 过 程 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<H1> 一 级 标题 </H1> 
<H2> 二 级 标题 </H2> 
<H3> 三 级 标题 </H3> 


<H4> 四 级 标题 </H4> 
<H5> 五 级 标题 </H5> 
<H6> 六 级 标题 </H6> 
</body> 
</html> 


| 在 代码 中 加 粗 部 分 的 代码 标记 为 标题 标 
| 签 ， 预 览 效果 如 图 2-9 所 示 。 


|e DVavascrpramesiss B “| | x |es so ”| 
BE 


请 路 


二 于 而” 过 100% ~ 


图 2-9 标题 标签 
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上 2.4.2 课堂 小 实例 一 <Font> 标 签 

<Font> 标 签 用 于 控制 网 页 上 文本 的 显示 外 观 。 文 本 大 小 、 字 体 类 型 和 颜色 等 属性 都 可 使 
<Font> 标 签 指定 。 

基本 语法 : 


<Font size="+2" color="red" face=" 隶 书 "> 文本 内 容 </FONT> 


语法 说 明 : 

size 属 性 用 来 设置 文字 的 大 小 ， 可 以 为 文字 指定 的 大 小 范围 为 1~7。 最 大 为 7， 最 小 为 1。 也 
可 以 使 用 一 个 默认 的 文字 大 小 ， 然 后 相对 于 该 默认 大 小 指定 后 续 文 字 的 大 小 。 例 如 : size 默 认 文 
字 的 大 小 为 3， 则 size=+4 将 使 大 小 增加 到 7，size=-1 将 使 大 小 减 小 到 2。color 属 性 用 于 指定 字体 的 颜 
色 ， 可 以 指定 颜色 名 称 或 十 六 进 制 数 值 。face 属 性 用 于 指定 字体 的 类 型 。 

实例 代码 ; 

<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<font size="3"” color="red"> 红 色 3 号 字体 文本 !</font> 

<font size="2" color="blue"> 蓝 色 2 号 字体 文本 !'</font> 

<font face="verdana"” color="green"> 绿 色 verdana 文 本 !</font> 
</body> 

</html> 


在 代码 中 加 相 部 分 的 代码 标记 font 为 字体 标 | [Esc = 


记 ， 设 置 文本 大 小 和 颜色 ， 效 果 如 图 2-10 所 示 。 | |e Be 


红色 3 号 字体 文本 | 五色 :B 字 他 六 本 | 绿色 Verdana 文 本 ! 


: | 二 计算 所 | 全 六 楼 区 .可 用 向” 成 100 ~ 


图 2-10 字体 标记 


月 2.4.3 ”课堂 小 实例 一 一 字体 大 小 标签 font-size 

文字 的 大 小 也 是 字体 的 重要 属性 之 一 。 除 了 使 用 标题 文字 标记 设置 固定 大 小 的 字号 之 外 ， 
HTML 语 言 还 提供 了 <font> 标 记 的 size 属 性 来 设置 普通 文字 的 字号 。 

基本 语法 : 


<font size=" 文 字 字 号 ">….</font> 
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小 ， 


"Sh 


语法 说 明 : 


Size 属 性 用 来 设置 文字 的 大 小 ， 它 有 绝对 和 相对 两 种 方式 。Size 属 性 有 1 到 7 个 等 级 ，1 级 最 


7 级 的 字号 最 大 ， 黑 认 的 文字 大 小 是 3 号 字 。 可 以 使 用 “size=?” 定 义 文字 的 大 小 。 
实例 代码 : 


<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<p><font size="3"> 人 生 真 正 的 幸福 快乐 ， 起 始 于 心灵 深 处 的 懂 慢 ，</font></p> 
<p><font size="5"> 根 源 于 勤劳 双手 的 缔造 ， 心 简单 ， 世 界 就 简单 ，</font></p> 
<p><font size="7"> 守 望 幸福 ， 笑 迎 明 天 。</Efont></P> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 标记 是 设置 文字 的 字 | [rc 


<!doctype html> 


在 浏览 器 中 预览 效果 ， 如 图 2-11 所 示 。 


有 二 oo EY) 
Cs ee 
人 人 生 真 正 的 地 注 快乐 ， 起 妈 王 心 池 汪 处 的 恒 归 
根源 于 勤劳 双手 的 缔造 ， 心 简单 ， 世 界 就 简单 
EN a 0h 
守望 幸福 ， 笑 迎 明 天 。 
一 计 共 总 | 侠 沪 模式 大 月 > 00% > 


图 2-11 设置 文字 的 字号 


HTML 超 链接 标签 


pa 与 超 链接 的 范围 很 广泛 ， 利 用 它 不 仅 可 以 进行 网 页 间 的 相互 链接 ， 还 可 以 


pref 像 文件 、 多 媒体 文件 及 下 载 程序 等 
响 2.5.1 属性 href 


链接 标记 <a> 在 HTML 中 既 可 以 作为 一 个 : 语法 说 明 : 
跳 转 其 他 页 面 的 链接 ， 也 可 以 作为 “埋设 ”在 ; 在 该 语法 中 ，<a> 标 记 的 属性 值 如 表 2-2 所 示 。 
文档 中 某 处 的 一 个 “ 锚 定位 ”，<a> 也 是 一 个 | 表 2-2 ”<a> 标 记 的 属性 什 
行内 元 素 ， 它 可 以 成 对 出 现在 一 段 文档 的 任何 ; 属 性 说 明 
位 置 。 | _href 指定 链接 地 址 

全 : _name 给 链接 命名 

村 : title 给 链接 添加 提示 文字 

<a href=" 链 接 目 标 "> 链 接 显示 文本 </a> | target 指定 链接 的 目标 窗口 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 属 性 href</title> 
</head> 

<body> 


<p><a href="1">1、 浅 浅 九 月 花 落成 伤 </ 


a></p> 


等 待 </a></p> 


<p><a href="3">3、 守 护 着 你 的 爱 ， 一 直到 


永远 </a></p> 


<p><a href-"4">4、 我 相信 我 们 对 彼此 的 需 ， 


要 </a></p> 


a></p> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 为 设置 文档 
中 的 超 链接 ， 在 浏览 器 中 预览 可 以 看 到 链接 效 | 


加 2.5.2 属性 target 


在 创建 网 页 的 过 程 中 ， 默 认 情况 下 超 链接 | 
在 原来 的 浏览 器 窗口 中 打开 ， 可 以 使 用 target 属 


性 来 控制 打开 的 目标 窗口 。 
基本 语法 : 


打开 方式 "> 
语法 说 明 : 


在 该 语法 中 ，target 参 数 的 取 值 有 4 种 ， 如 | 
; blank'>1、 浅 浅 九 月 花 落成 伤 </a></P> 


表 2-3 所 示 。 
表 2-3 target 参 数 的 取 值 
语义 
在 当前 页 面 中 打开 链接 
在 一 个 全 新 的 空白 窗口 中 打开 链接 
在 顶层 框架 中 打开 和 链接， 也 可 以 理解 
为 在 根 框架 中 打开 链接 
在 当前 框架 的 上 一 层 里 打开 链接 


属性 值 
-self 
-blank 


-top 


-parent 


! 国 Bepref- wocows memet Br 


<p><a href="2">2、 相 思 渡 头 泊 着 我 依旧 的 


<p><a href="5">5、 思 你 ， 念 你 ， 风 十 中 </ 


<a href-" 链 接 目标 ”target-" 目 标 窗口 的 | 
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| 果 ， 如 图 2-12 所 示 。 我 们 在 淘宝 网 站 上 看 到 的 
i 都 是 超 文本 链接 效果 ， 如 图 2-13 所 示 。 


es | 
= 

四 pvensopmr 国 -|e|xllsa p27 
i 


盾 计 基 | 条 护 溉 区 村 有 


图 2-12 超 链 接 效 果 


EE 


生机 一 入 


同名 馈 村 外 委 今季 名 店 草 撒 
CT mn TRE mw 


图 2-13 超 链接 网 页 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 属 性 target</title> 

</head> 

<body> 

<p><a href="zhengwen.html" target="_ 


<p><a href="2">2、 相 忆 渡 头 泊 着 我 依旧 的 


| 等 待 </a></p> 


<p><a href="3">3、 和 守护 着 你 的 爱 ， 一 直到 


| 永远 </a></p> 


<p><a href="4">4、 我 相信 我 们 对 彼此 的 需 


; 要 </a></p> 


<p><a hre 人 5>5、 忆 你 ， 念 你 ， 风 雨中 </a></p> 
</body> 
</html> 
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在 代码 中 加 粗 的 代码 标记 target=“_ 
blank” 是 设置 内 部 链接 的 目标 窗口 ， 在 浏览 昌 
预览 并 单 击 设置 链接 的 对 象 ， 可 以 打开 一 
新 的 窗口 ， 如 图 2-14 和 图 2-15 所 示 。 


-=e 
ile// Ds/JavaSeriptm 陆 计算 ff | 各 六 模式 :可用 100% 
图 2-14 设置 链接 目标 窗口 


图 2-15 ”打开 的 目标 窗口 


虽 2.5.3 ”属性 title 

title 属 性 规定 关于 元 素 的 额外 信息 。 这 些 
信息 通常 会 在 鼠标 移 到 元 素 上 时 显示 一 段 工 具 
提示 文本 (tooltip text) 。title 属 性 有 一 个 很 
好 的 用 途 ， 即 为 链接 添加 描述 性 文字 ， 特 别 是 
当 链接 本 身 并 不 是 十 分 清楚 地 表达 了 链接 的 目 
的 。 这 样 就 使 得 访问 者 知道 那些 链接 将 会 


带 他 | 


i 们 到 什么 地 方 ， 他 们 就 不 会 加 载 一 个 可 能 完全 


不 感 兴趣 的 页 面 。 
基本 语法 : 


<element title="value"> 


语法 说 明 : 
规定 元 素 的 工具 提示 文本 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<a href="http://www.baidu.cn" title 
"百度 的 中 文 站 点 "> 百度 网 站 </a> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 标记 可 以 让 鼠标 最 
停 在 超 链接 上 的 时 候 ， 显 示 该 超 链接 的 文字 注 
释 ， 在 浏览 器 中 预览 效果 ， 如 图 2-16 所 示 。 


D BEEK windowintemet oplorer 


OU [Tema -|| 
区 


ER 


bmp paid cn/ 阿 守 各 仙 |G 棋 克 妆 


图 2-16 设置 描述 性 文字 
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国 2.5.4 ”课堂 小 实例 一 一 链接 到 E-mail 地 址 


在 网 页 上 创建 E-mail 链接 ， 可 以 使 浏 
时 ， 可 以 立即 打开 浏览 
更 新 ， 无 须 浏览 者 输入 。 

基本 语法 : 


览 者 能 够 快速 反馈 自己 的 意见 
和 器 默认 的 E-mail 处 理 程序 ， 收 件 人 邮件 地 址 被 E_mail 超 链 接 中 指 


当 浏 览 者 单 击 E-mail 链 接 


定 的 地 址 自动 


<a href="mailto: 电 子 邮件 地 址 "> 链接 内 容 </a> 


语法 说 明 : 


在 该 语法 中 ， 电 子 邮 件 地 址 后 面 还 可 以 增加 一 


些 参数 ， 见 表 2-4 所 示 。 
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表 2-4 ”邮件 的 参数 


抄 送 收 件 人 
电子 邮件 


电子 邮件 内 容 


| 说明 | 
送 
EF 题 


实例 代码 : 


<!doctype html> : 
<html> : 
<head> | 
<meta charset="utf-8"> | 
<tit1e> 无 标题 文档 </title> : 
</head> : 
<body> : 
<tr> : 
<td valign=bottom height=35> | 
<a href="mailto: sdwdde163.com'> 电 ; 


<a href=“mailto: 电 子 邮 件 地 址 ?cc= 电 子 邮件 地 址 ”> 链接 内 容 </a> 
<a href=“mailto: 电 子 邮 件 地 址 ?subject= 主 题 文 字 ”> 链 接 内 容 </a> 
<a href=“mailto: 电 子 邮 件 地 址 ?bcc= 电 子 邮 件 地 址 ”> 链接 内 容 </a> 
<a href=“mailto: 电 子 邮 件 地 址 ?body= 邮 人 


| 了 
| OO larvwsrpn @ -| 


内容 ”> 链接 内 容 </a> 


x 


富 Bx 
电子 邮件 过 二 
从 


部 计算 Wi | 保 F 昼 式 :全 用 人 0% 


图 2-17 创建 E-mail 链接 


子 邮 件 连 接 </a> 文件 四 编辑 中 查看 W) 插入) 格式 0) 工具 > 肌 | 
- 
</td> | 中 
</tr> 
</body> 国 中 人 :onilto: xdvdxiaale3 eon 
[3 
</html> 于 


在 代码 中 加 粗 的 代码 标记 <a href= | 
“mailto:mailto: sdwdd@163.com”> 用 于 创建 | 
E-mail 链接 ， 在 浏览 器 中 浏览 效果 ， 如 图 2-17 | 
所 示 。 当 单 击 链接 文字 “电子 邮件 连接 ”时 ， 
会 打开 默认 的 电子 邮件 软件 Outlook Express， 
如 图 2-18 所 示 。 


2.0 


动 美观 。 浏 览 器 可 以 显示 JPEG 和 GIF 


图 2-18 发 送 电子 邮件 


HTML 图 像 标签 o 


在 HTML 页 面 中 可 以 插入 图 像 ， 并 设置 


图 像 属 性 。 图 像 可 以 使 网 页 更 加 生 
像 是 通过 < img > 标签 来 实现 的 。 


良 


图 


像 ， 在 HTML 文 档 中 插入 


用 2.6.1 课堂 小 实例 一 一 属性 img 

引用 图 像 必 须 使 用 <img> 标 记 ，<img> 标 记 包含 src 属 性 。src 的 属性 值 是 所 引用 图 像 的 URL 地 
址 ， 该 地 址 既 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 

有 了 图 像 文件 后 ， 就 可 以 使 用 img 标 记 将 图 像 插入 到 网 页 中 ， 从 而 达到 美化 网 页 的 效果 。img 


元 素 的 相关 属性 如 表 2-5 所 示 。 
23 
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表 2-5 。 img 元素 的 相关 属性 


属 性 描 述 
src 图 像 的 源 文件 
alt 提示 文字 
width，height | 宽度 和 高 度 
border 边框 
vspace 垂直 间距 
hspace 水 平 间 距 
align 排列 
dynsrc 设 定 avi 文 件 的 播放 
loop 设 定 av 文件 循环 播放 次 数 
loopdelay 设 定 av 文件 循环 播放 延迟 
start 设 定 avi 文 件 播放 方式 
lowsrc 设 定 低 分 辩 率 图 片 
usemap 映像 地 图 
基本 语法 : 
<img src=" 图 像 文件 的 地 址 "> 
语法 说 明 ; 
在 语法 中 ，src 参 数 用 来 设置 图 像 文件 所 在 


的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 ， 也 可 以 是 | 

绝对 路 径 。 : 
在 代码 中 加 粗 的 代码 标记 是 在 页 面 中 插入 一 

幅 图 像 ， 在 浏览 器 中 预览 效果 ， 如 图 2-19 所 示 。 


侦 2.6.2 ”课堂 小 实例 一 一 属性 alt 

alt 属 性 是 一 个 用 于 网 页 语言 HTML 和 | 
XHTML、 为 输出 纯 文字 的 参数 属性 。 它 的 作用 
是 当 HTML 元 素 本 身 的 物件 无 法 被 泻 染 时 ， 就 
显示 alt (替换 ) 文字 作为 一 种 补救 措施 。 

基本 语法 : 

<img src=" 图 像 文件 的 地 址 ”alt=" 提 示 文 字 
的 内 容 ”> 


语法 说 明 : 
alt 属 性 的 值 是 一 个 最 多 可 以 包含 1024 个 
字符 的 字符 串 ， 其 中 包括 空格 和 标点 。 这 个 字 
符 串 必须 包含 在 引号 中 。 这 段 alt 文 本 可 以 包 
含 对 特殊 字符 的 实体 引用 ， 但 它 不 允许 包含 其 
他 类 别 的 标记 ， 尤 其 是 不 允许 有 任何 样式 


标签 。 


实例 代码 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<img src="1.jpg"> 
</body> 

</html> 


涂 | 


这 冲 克 妆 洲 诈 上 蛤 


巴 mr ran a 


图 2-19 插入 图 像 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<body> 

<img src='1.jpg' alt= 纯 天 然 环保 天 丝 " /> 
</body> 

</html> 


在 代码 中 加 粗 的 代码 标记 是 当 用 户 把 鼠标 
移 到 图 像 上 方 ， 当 图 像 正常 显示 时 ， 如 图 2-20 
所 示 。 如 果 图 片 不 正确 时 则 显示 替代 文本 ， 在 
浏览 器 中 预览 效果 ， 如 图 2-21 所 示 。 
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Be widow 本 一 一 | 
Ee DVaveScript @ -|1|X| Eang Pp- 
Er 
六 EE 
| 抒 天 下 环 吉 天 吾 
BR 
Er 或 类 计算 机 | 保护 模 式 : 禁用 三 ” 甩 100% ~ 
图 2-20 图 片 正 常 显 示 图 2-21 图 片 不 正常 显示 替代 文本 


肯 2.6.3 ”课堂 小 实例 一 一 属性 height 和 width 
height 属 性 用 来 定义 图 片 的 高 度 ， 如 果 <img> 元 素 不 定义 高 度 ， 图 片 就 会 按照 它 的 原始 尺寸 显示 。 
基本 语法 : 
<img src= 
语法 说 明 ， 
在 该 语法 中 ，height 用 于 设置 图 像 的 高 度 。 
实例 代码 : 


<!doctype html> 


9 像 文件 的 地 址 ”height=" 图 像 的 高 度 "> 


尽量 不 要 通过 height 和 width 属 性 来 缩放 图 
像 。 如 果 通过 height 和 width 属性 来 缩小 图 
像 ， 那 么 用 户 就 必须 下 载 大 容量 的 图 像 ( 即 


html 
i 使 图 像 在 页 面 上 看 上 去 很 小 ) 。 正确 的 做 法 
<meta charset="utf-8"> | 是 在 网 页 上 使 用 图 像 之 前 ， 应 该 通过 软件 把 
<title> 无 标题 文档 </title> i | 图 像 处 理 到 合适 的 尺寸 。 
</head> | 
<body> 


<img src="2.jpg" width="372" : 
height="326" /> : 

<img src="2.jpg" width="372" : 
height="188" /> : 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 第 1 行 标记 是 使 用 : | 
height=“326” 设 置 图 像 高 度 为 326， 而 第 2 行 图 2-22 调整 图 像 的 高 度 
标记 是 使 用 height=“188” 来 调整 图 像 的 高 度 ; width 属性 用 来 定义 图 片 的 宽度 ， 如 果 
为 188， 在 浏览 器 中 预览 可 以 看 到 调整 图 像 的 : <img> 元 素 不 定义 宽度 ， 图 片 就 会 按照 它 的 原 
高 度 ， 如 图 2-22 所 示 。 | 始 尺寸 显示 。 

基本 语法 : . 


<img src=" 图 像 文件 的 地 址 "width=" 图 像 的 宽度 "> 


语法 说 明 : 
在 该 语法 中 ，width 用 于 设置 图 像 的 宽度 。 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<img src="2.jpg" width="450 
height="384" /> 

<img src="2.jpg" width="250 
height="384" /> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 第 1 行 标记 是 使 用 
width=“450” 设 置 图 像 宽度 为 450， 而 第 2 行 


标记 是 使 用 width=“250” 调 整 图 像 的 宽度 为 
250， 在 浏览 器 中 预览 可 以 看 到 调整 图 像 的 宽 


二 PEE RN 。 电 


图 2-23 ”调整 图 像 的 宽度 


人 肯 2.6.4 课堂 小 实例 一 一 属性 align 


<img> 标 签 的 align 属 性 定义 了 图 像 相对 于 | 


周围 元 素 的 水 平和 垂直 对 齐 方式 。 
基本 语法 : 


<img src=" 图 像 文 件 的 地 址 ” align=" 对 齐 


方式 "> 
语法 说 明 : 


可 以 通过 <img> 标 签 的 align 属 性 来 控制 带 有 | 


文字 包围 的 图 像 的 对 齐 方 式 。HTML 和 XHTM 
实例 代码 : 


<!doctype html> 
<html> 


<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 


标准 指定 了 5 种 图 像 对 齐 属性 值 : left、right、 
op、middle 和 bottom。align 的 取 值 如 表 2-6 所 示 。 
表 2-6 _ align 的 取 值 


图 像 与 底部 对 齐 
图 像 与 顶部 对 齐 
middle 


图 像 对 齐 到 左边 
图 像 对 齐 到 右边 


展 一 抹 笑 丑 ， 暧 一 世 薄 凉 ， 拢 一 季 花 香 ， 淡 一 缕 情 悉 ， 捧 一 路 幸福 ， 微 笑 于 明媚 红尘 。 


香雪 若 兰 <img 


src="4.jpg" width="200" height="150" hspace="40" align="right"><br> 


<br> 
微笑 是 我 们 生活 中 不 可 缺少 的 元 素 。<br> 


<br> 


它 如 一 抹 阳 光 ， 缓 缓 暖 心 ， 如 一 股 清泉 ， 轻 轻 润 心 ， 如 一 杯 佳酿 ， 久 久 醉 心 ， 如 一 瘟 香 茶 ， 慢 慢 染 心 ; 
亦 如 一 首 曼妙 的 诗篇 ， 渺 渺 于 红尘 ， 给 多 彩 的 世界 点 缀 了 几 抹 尹 然 ， 给 沧桑 的 岁月 平添 了 几许 明媚 。 浅 浅 的 微 
笑 ， 真 是 又 优 又 雅 ， 在 人 生路 上 ， 唯 美 了 一 程 又 一 程 的 山水 ， 妩 媚 了 一 季 又 一 季 的 风景 。<br> 
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<br> 

微笑 如 一 缕 春 风 ， 以 最 完美 的 舞姿 ， 赠 与 我 们 的 亲人 、 友 人 和 爱人 。 微 笑 如 一 条 幽 兰 ， 以 最 宁静 的 柔 
美 ， 赋 予 我 们 的 生命 ， 淡 雅 而 不 浮华 ， 清 香 却 不 失 浓烈 ， 以 它 一 种 独特 的 魅力 ， 传 递 着 温暖 ， 播 种 着 幸福 ， 
收获 着 生命 中 一 次 又 一 次 的 感动 。<br> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 标记 align=“right” 是 | [站 = 


为 图 像 设 置 对 齐 方式 ， 在 浏览 器 中 预览 效果 , 可 ; 
以 看 出 图 像 是 右 对 齐 的 ， 如 图 2-24 所 示 。 : 


入 风 ， 以 最 充 美 的 得 疾 ， 人 和 爱人 。 调 笑 如 一 休 山 兰 ， 以 最 宁 
者 的 骤 关 的 生 富 ， 误 车 而 趟 汪 清理 t 涩 列 ， 以 它 一 种 扫 特 的 购 力 ， 传 遂 着 温 
也， 播种 着 不 祈 ， 收 困 着 生病 中 一 次 又 一 座 的 硬 动 。 
| 区 ES 


图 2-24 对 图 像 设 置 对 齐 方式 


上 2.6.5 课堂 小 实例 一 一 属性 border 
默认 情况 下 ， 图 像 是 没有 边框 的 ， 使 用 mg 标记 符 的 border 属 性 ， 可 以 定义 图 像 周围 的 边框 。 
基本 语法 : 
<img src=" 图 像 文件 的 地 址 ”border=" 图 像 边框 的 宽度 "> 


语法 说 明 ， 
在 该 语法 中 ，border 的 单位 是 像素 ， 其 值 越 大 则 边框 越 宽 。HTML4.01 不 推荐 使 用 图 像 的 
border 属 性 ， 但 是 所 有 主流 浏览 器 均 支 持 该 属性 。 


实例 代码 : : 在 代码 中 加 粗 部 分 的 标记 第 1 行为 没有 为 图 
和 ; 像 添加 边框 ， 第 2 行 是 使 用 border=“5” 为 图 像 
<html> : 添加 边框 ， 在 浏览 器 中 预览 ， 可 以 看 到 添加 的 
<head> ; 边框 效果 为 5 像素 ， 如 图 2-25 所 示 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 


<img sro='3.jpg' width 478" height—"347" > 
<img src="3.jpg" width="478" | 
height="347" border="5"> | 


</body> 
</html> 


PE 


图 2-25 ”添加 图 像 边框 效果 
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2./ 


图 像 以 及 各 种 对 象 。 行 贯穿 
输入 信息 的 地 方 。 


围 2.7.1 


通过 3 个 标记 来 创建 ， 分 别 是 表格 标记 table、 


行 标记 tr 和 单元 格 标记 td。 表 格 的 各 种 属性 都 要 
在 表格 的 开始 标记 <table> 和 表格 的 结束 标记 </ 


table> 之 间 才 有 效 。 
基本 语法 : 


<table> 

Ep> 

<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 </td> 
</tr> 

<tr> 

<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 </td> 
< Er 

</table> 


话 法 说 明 : 


<table> 标 签 定义 HTML 表 格 。 简 单 的 : 
HTML 表 格 由 table 元 素 以 及 一 个 或 多 个 tr、th 或 | 
td 元 素 组 成 。tr 元 素 定义 表格 行 ，th 元 素 定义 表 | 


头 ，td 元 素 定 义 表格 单元 。 


在 代码 中 加 粗 部 分 的 代码 标记 是 表格 的 基 | 
在 浏览 器 中 预览 ， 可 以 看 到 在 网 页 中 ; 


本 构成 ， 
添加 了 一 个 2 行 2 列 的 表格 ， 如 图 2-26 所 示 。 


四 2.7.2 
<th> 标 签 就 是 Table Heading， 


HTML 表 格 标签 


表格 由 行 、 列 和 单元 格 3 部 分 组 成 。 使 用 表格 可 以 排列 页 面 中 的 文本 、 
表格 的 左右 ， 列 则 是 上 下 方式 的 ， 单 元 格 是 行 和 列 交汇 的 部 分 ， 它 是 


课堂 小 实例 一 一 表格 标签 <table>…</table> 
表格 由 行 、 列 和 单元 格 3 部 分 组 成 ， 一 般 : 


实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<th> 语 文 </th> 
<th> 数 学 </th> 
</tr> 


<tr> 
<td>90</td> 
<td>100</td> 
</tr> 
</table> 
</body> 
</html> 


ET 
计 v | 后 拓 ESEXE 


语文 数学 
由 mo 


商 计 上 | 保 # 辣 末 光 


图 2-26 表格 效果 


课堂 小 实例 一 一 表 头 标签 <th>…</th> 


意思 是 表格 标题 。<th> 标 签 


在 使 用 时 ， 跟 <th> 标 签 没有 什么 区 


别 ， 如 果 非 要 说 有 点 区 别 的 话 ， 那 就 是 <th> 一 般 只 用 在 第 一 个 <th> 下 。 在 浏览 器 中 显示 时 ，<th> 
标签 被 显示 为 加 粗 的 字体 ， 其 他 的 跟 普通 的 < td> 也 没有 区 别 


记 中 。 


基本 语法 : 
<table > 
<tr> 
<th>.…</th> 


</tr> 
</table> 


语法 说 明 ， 
(1) <th>: 


实例 代码 : 
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表示 头 标记 ， 包 含 在 <tr> 标 | 


(2) 在 表格 中 ， 只 要 把 标记 <td> 改 为 | 
<th> 就 可 以 实现 表格 的 表 头 。 : 


</Er> 

<Er>: 
<td> 香 燕 </td> 
<tqd>5 元 </td> 
</tr> 

<tr> 
<td> 西 瓜 </td> 
<td>1 元 </td> 
</tr> 
</table> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 为 设置 表格 


| 的 表 头 ， 在 浏览 器 中 预览 ， 可 以 看 到 表格 的 表 


<!doctype html> 
<html> 
<head> 


| 如 图 2-27 所 示 。 


医 ZEEETEZ2ZXEOREZT 


<meta charset="utf-8"> 
<tit1le> 无 标题 文档 </title> 
</head> 

<body> 

<table> 


ER 
<th> 水 果 名 称 </th> 
<th> 单 价 </th> 


图 2-27 表格 的 表 头 效果 


胃 2.7.3 课 党 小 实例 一 说 明 标 签 <eaption>… </caption> 
caption 元 素 定义 表格 标题 。caption 标 签 ; 
必须 紧 随 在 table 标 签 之 后 。 只 能 对 每 个 表格 | 


定义 一 个 标题 。 通 常 这 个 标题 会 被 居中 于 表 : 村 检 条 关 站 和 料 夫 | 
格 之 上 | 序号 刍 相 外 径 。” 匡 尺 十 基 产 尺 十 | 
在 代码 中 加 粗 部 分 的 标记 为 设置 表格 的 标 :| 2 


题 为 “按键 开关 资料 表 ”， 在 浏览 器 中 预览 ， 
可 以 看 到 表格 的 标题 ， 如 图 2-28 所 示 。 


PE 2] 


图 2-28 表格 的 标题 


基本 语法 : 
<caption> 表 格 的 标题 </caption> 
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实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table width="399" height="150"> 
<caption> 
按键 开关 资料 表 
</caption> 
<tr> 
<td width="98"> 序 号 </td> 
<td width="95"> 键 帽 外 径 </td> 
<td width="101"> 盖 尺寸 </td> 
<td width="77"> 基 座 尺寸 </td> 
<HEr> 
<tr> 
<td>1</td> 
<td>5</td> 
<td>5-0.05 白 </td> 
<td>18 白 </td> 
SEE > 
< 
<td>2</td> 
<td>3.5</td> 
<td>4.9-0.05 白 </td> 
<td>18 白 </td> 
/Er> 
</table> 
</body> 
</html> 


框架 技术 可 以 将 浏览 器 分 割 成 多 个 小 窗口 ， 并 且 在 每 个 小 窗口 
显示 不 同 的 网 页 ， 这 样 我 们 就 可 以 很 方便 地 在 浏览 器 中 浏览 不 


@ 


司 ] 


的 网 页 效果 。 


器 2.8.1 框架 集 标签 <frameset>…</frameset> 
frameset 元 素 可 定义 一 个 框架 集 。 它 被 用 来 组 织 多 个 窗口 (框架 ) 。 每 个 框架 存 有 独立 的 文 


Ph， 可 以 


档 。 在 其 最 简单 的 应 用 中 ，frameset 元 素 仅 仅 会 规定 在 框架 集中 存在 多 少 列 或 多 少 行 。 必 须 配 合 使 


Cols 或 r ows 属性。 


基本 语法 : 

<frameset cols="*" rows="*" border="*"> 
<frame src=" "> 

<frame src=" "> 


</frameset> 


rows 属 性 用 来 规定 主 文档 中 有 几 行 框架 窗 ; 


口 及 各 个 框架 窗口 的 大 小 。 


口 及 各 个 框架 窗口 的 大 小 。 


数 ， 


说 明 的 空间 平均 分 配 ， 每 个 值 之 间 用 逗号 隔 开 。 
实例 代码 : 
<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<frameset cols="25%,50%,25%"> 
<frame src="frame a.htm' /> 
<frame src="frame b.htm" /> 
<frame src="frame c.htm" /> 

</frameset> 

<body> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 标记 为 设置 三 框架 页 | 
面 ， 在 浏览 器 中 预览 ， 如 图 2-29 所 示 。 


rr 
Sp mah Ba Ca TA we 
bens Ena 


PR ET 


器 FEA 


图 2-29 三 框架 页 面 


ET 


cols 属 性 用 来 规定 主 文档 中 有 几 列 框架 窗 | 
属性 值 可 以 是 百分数 、 绝 对 像素 值 。 或 者 星 | 
号 (*) 的 组 合 ， 取 值 的 个 数 说 明了 行 和 列 的 个 | 


(*) 代表 那些 未 被 说 明 的 空间 ， 如 果 同 一 
个 属性 中 出 现 多 个 星 号 (*) ， 则 将 剩 下 的 未 被 | 


| content="text/html; charset=gb2312" 


= 甘 | 
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| 2.8.2 标签 <noframes> 

上。 当 别 人 使 用 的 浏览 器 大 旧 ， 不 支持 框架 
| 这 个 功能 时 ， 就 会 看 到 的 一 片 空白 。 为 了 避免 
| 这 种 情况 发 生 ， 可 使 用 <nofames> 这 个 标记 ， 
i 当 使 用 者 的 浏览 器 看 不 到 框架 时 ， 就 会 看 到 


: <nofames> 与 </nofames> 之 间 的 内 容 ， 而 不 是 


| 一 片 空白 。 这 些 内 容 可 以 是 提醒 浏览 者 转 用 新 
| 的 浏览 器 的 字句 ， 甚 至 是 一 个 没有 框架 的 网 页 
或 能 自动 切换 至 没有 框架 的 版 本 即 可 。 

基本 语法 : 

<noframes> 


</noframes> 


语法 说 明 : 
noframes 可 为 那些 不 支持 框架 的 浏览 器 显 


| 示 文 本 。 如 果 希 望 frameset 添 加 <noframes> 
| 标签， 就 必须 把 其 中 的 文本 包装 在 <body> 与 </ 
| body> 的 标签 中 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<meta http-equiv="Content-Type" 
1 
<title> 不 支持 框架 </title> 

</head> 

<frameset rows="*" cols="209,*" 


framespacing="1l" frameborder="yes" 


| border="1"> 


<frame Src="left.html" 


| name="leftframe" scrolling="yes"> 


<trane sreo=sriqhnth tn 


: name="mainframe"> 


</frameset> 


<noframes> 


很 抱 娄 ， 您 使 用 的 浏览 器 不 支持 框架 功能 ， 请 


| 转 用 新 的 浏览 器 1 


</noframes> 


</html> 
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在 代码 中 加 粗 部 分 的 代码 标记 为 设置 不 支持 框架 标记 ， 若 浏览 器 支持 框架 ， 那 么 它 不 会 理会 
<noframes> 中 的 东西 ， 但 若 浏览 器 不 支持 该 框架 ， 由 于 不 认识 所 有 框架 标记 ， 不 明 的 标记 会 被 略 
过 ， 标 记 包 围 的 东西 便 会 被 解读 出 来 ， 所 以 放 在 <noframes> 范 围 内 的 文字 会 被 显示 。 


月 2.8.3 浮动 窗口 标签 <iframe>…</iframe> 
<iframe> 标 签 称 为 浮动 窗口 标签 。<iframe> 和 </iframe> 标 签 不 需要 放 在 <frameset> 和 </ 
frameset> 标 签 之 间 ， 它 的 作用 是 在 一 个 网 页 中 间 插 入 一 个 简单 的 框架 窗口 ， 在 这 个 框架 窗口 中 可 
以 显示 另外 一 个 文件 ， 这 样 就 能 够 实现 一 种 “ 画 中 画 ” 的 效果 。 在 <iframe> 和 </iframe> 标 签 对 中 
放 入 的 文本 只 有 在 浏览 器 不 支持 <iframe> 标 签 时 才 会 显示 ， 给 用 户 一 个 提示 信息 。 
基本 语法 : | 


<iframe src="url"></iframe> 


语法 说 明 ， 

Src=“” 当前 框架 所 链接 的 页 面 地 址 。 

实例 代码 : 

<TD vAlign=top> 

<iframe width="600" height="400 
src="fudong.html"> 


</iframe></TD> 

在 代码 标记 <iframe width="600" height= 
"400" src="fudong.html"> 为 设置 浮动 框架 的 源 
文件 ， 在 浏览 器 中 预览 效果 ， 如 图 2-30 所 示 。 


器 2.8.4 框架 的 frameborder 设 置 


图 2-30 设置 浮动 框架 的 源 文件 


在 浮动 框架 页 面 中 ， 可 以 使 用 rameborder | 在 代码 中 标记 frameborder=“1” 为 设置 
设置 显示 框架 的 边框 。 | 浮动 框架 的 边框 ，style=“border:double” 为 
基本 语法 : 设置 边框 为 双边 框 ， 在 浏览 器 中 预览 效果 ， 如 


<iframe src=" 浮 动 框架 的 源 文件 图 2-31 所 示 。 
frameborder=" 是 否 显 示 框架 边框 "></iframe> 


语法 说 明 : 
frameborder 只 能 取 0 和 1， 或 yes 和 no。 


和 no 表示 边框 不 显示 ，1 和 yes 为 默认 取 值 ， 表 


示 显 示 边 框 。 
外 护 节 工程 。 起 生 举 加 加 组 则 | 
实例 代码 : | 


加 产品 
元 地 直 化 学 和 
主 ， 为 全 要 从 全 于 的: 

(1 得 直 国 村 村 工 和 这 


src="fudong.html" scrolling="yes" En we 


<TD vAlign=top> 


<iframe width="600" height="400 


frameborder="1" style="border:double" > 


FE ST 


人 图 2-31 设置 浮动 框架 边框 的 效果 
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在 网 页 中 <form></form> 标 记 对 用 来 创建 一 个 表单 ， 即 定义 表单 的 开始 
和 结束 位 置 ， 在 标记 对 之 间 的 一 切 都 属于 表单 的 内 容 。 在 表单 的 <form> 标 记 中 ， 可 以 设置 表单 的 
基本 属性 ， 包 括 表 单 的 名 称 、 处 理 程序 和 传送 方法 等 。 一 般 情况 下 ， 表 单 的 处 理 程序 action 和 传送 
方法 method 是 必 不 可 少 的 参数 。 


上 2.9.1 课堂 小 实例 一 一 表单 标签 <form>…</from> 
在 浮动 框架 页 面 中 ， 可 以 使 用 frameborder 设 置 显 示 框 架 边 框 。 
基本 语法 : 


<Form name="Form name"> 


</Form> 


语法 说 明 : 
通过 为 表单 命名 可 以 控制 表单 与 后 合 程序 之 间 的 关系 。 
实例 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 

<h1> 用 户 调查 </h1> 

<Form name=invest> 
</Form> 
</body> 
</html> 


全 2.9.2 ”课堂 小 实例 一 一 用 户 输入 区 域 标签 <input type="> 

在 网 页 中 插入 的 表单 对 象 包括 文本 字段 、 复 选 框 、 单 选 按钮 、 提 交 按 钮 、 重 置 按钮 和 图 像 域 
等 。 在 HTML 表 单 中 ，input 标 记 是 最 常用 的 表单 标记 ， 包 括 常见 的 文本 字段 和 按钮 都 采用 这 个 
标记 。 

基本 语法 : 

<form> 

<input type=" 表 单 对 象 " name=" 表 单 对 象 的 名 称 "> 


</form> 


在 该 语法 中 ，name 是 为 了 便于 程序 对 不 同 表单 对 象 的 区 分 ，type 则 是 确定 了 这 一 个 表单 对 象 的 
类 型 。type 所 包含 的 属性 值 如 表 2-7 所 示 。 
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表 2-7 type 的 属性 值 


属性 值 说 明 
text 文本 字段 
password 密码 域 
radio 单 选 按钮 
checkbox 复 选 框 
button 普通 按钮 
submit 提交 按钮 
reset 重 置 按 钮 
image 图 像 域 
hidden 隐藏 域 
file 文件 域 
实例 代码 : | 在 代码 中 加 粗 的 标记 <input name= 
A a | “textfield” type= “text” size= “25” 
<html> | maxlength=“20”> 将 文本 域 的 名 称 设置 为 
<head> | textfield， 长 度 设 置 为 25， 最 多 字符 数 设置 为 
<meta charset="utf-8"> 20， 在 浏览 器 中 浏览 效果 ， 如 图 2-32 所 示 。 
<title> 无 标题 文档 </title> | 
</head> 
Se : 文本 域 的 长 度 如 果 加 入 了 size 属 性 ， 就 可 以 
<form><tr> ; | 设置 size 属 性 的 大 小 ， 其 最 小 值 为 1， 最 大 值 
<td width="134"> 将 取决 于 浏览 器 的 宽度 。 
<span class="style4"> 姓 名 : </span> | 
</td> 1 7- | 
<td width="296"> | 
<input name="textfield" type="text" | 人 
size="25" maxlength="20"> | 
</td> 
</tr></form> 
</body> 
</html> 


图 2-32 设置 文字 字段 


| @ 实战 应 用 一 一 制作 精美 表格 效果 一 


实例 代码 : 


<!doctype html> 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html"; charset="gb2312" /> 
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在 代码 中 加 粗 部 分 为 设置 表格 的 表 主体 ， 在 浏览 器 中 预览 效果 ， 如 图 2-33 所 示 。 


JavaScript 网 页 设计 与 网 站 特效 国语 芭 本 二 人 


共和 条 记录 页 次 ，1/7 每 页 ，13; 条 记录 1[2][3] [4][[6] [7] 


EEC PE 


图 2-33 表格 的 表 主 体 效果 


@ 


1. 填空 题 
(1) HTML 的 结构 包括 _ 、_ 两 大 部 分 ， 其 中 头 部 描述 浏览 器 所 需 的 信息 ， 


而 主体 则 包含 所 要 说 明 的 具体 内 容 。 
(2) HTML 的 任何 标签 都 由 “<” 和 “>” 围 起 来 ， 如 <HTML>。 在 起 始 标签 的 标签 名 前 加 上 
符号 “/” 便 是 其 ， 如 </HTML>， 夹 在 起 始 标签 和 终止 标签 之 间 的 内 容 受 标签 的 控制 。 
(3) 表格 由 、. ” 和 三 部 分 组 成 。 使 用 表格 可 以 排列 页 面 中 的 文 


本 、 图 像 以 及 各 种 对 象 。 


2， 操作 题 
制作 一 个 简单 的 表单 网 页 ， 如 图 2-34 所 示 


图 2-34 插入 表单 对 象 
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数据 类 型 和 变量 


本 章 导 读 
数据 类 型 在 数据 结构 中 的 定 
义 是 一 个 值 的 集合 以 及 定义 在 这 
个 值 集 上 的 一 组 操作 。 变 量 是 
来 存储 值 的 所 在 处 ;它们 有 名 字 
和 数据 类 型 。 变 量 的 数据 类 型 决 
定 了 如 何 将 代表 这 些 值 的 位 存储 
到 计算 机 的 内 存 中 。 在 声明 变量 
时 也 可 指定 它 的 数据 类 型 。 所 有 
量 都 具有 数据 类 型 ， 以 决定 能 
够 存储 哪 种 数据 。 


技术 要 点 
@ 基本 数据 类 型 
@ 复合 数据 类 型 
@ 常量 

© 变量 
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实例 展示 


3. | 


基本 数据 类 型 ° 


JavaScript 脚 本 语言 同 其 他 语言 一 样 ， 有 它 自身 的 基本 数据 类 型 、 表 达 


式 和 算术 运算 符 以 及 程序 的 基本 框架 结构 。 在 JavaScript 中 有 4 种 基本 的 数据 类 型 :数值 (整数 和 


实数 ) 、 字 符 串 型 、 布 尔 型 和 空 
M3.1.1 


课堂 小 实例 一 一 使 用 字符 串 型 数据 


字符 串 是 存储 字符 的 变量 ， 可 以 表示 一 串 字 符 ， 字 符 串 是 引号 中 的 任意 文本 ， 可 以 使 用 单 引 


号 或 双 引号 对 其 进行 标记 ， 如 下 代码 所 示 。 


基本 语法 : 


str=" 字 符 串 "; 
str=' 字 符 串 '; 


Var 


Var 


可 以 通过 length 属 性 获得 字符 串 长 度 。 例 如 : 


Var SStr=" How are you "7 
alert (sstr.length); 


下 面 使 用 引号 定义 字符 串 变量 ， 使 用 | 


documentwrite 输 出 相应 的 字符 串 ， 代 码 如 下 所 示 。 


<script> 

var haol="good morning!"; 
Var hao2="Good afternoon!"; 
Var hao3='Good night!'; 
document .write (haol + "<br>") 
document .write (hao2 + "<br>") 
document .write (hao3 + "<br>") 


</script> 


// 使 用 双 引号 定义 字符 串 
// 使 用 单 引号 定义 字符 串 


打开 网 页 文件 ， 运 行 的 效果 如 图 3-1 所 示 。 


| nn ET IE 2 


A 
图 3-1 输出 字符 囊 
本 代码 中 var hao1=“good moming!l”、var 


| hao2=“Good afternoon!” 和 var hao3= “Good 
;nightl” ， 分 别 使 用 单 引号 和 双 引 号 定义 字符 串 ， 


| 最 后 使 


document.write 输 出 定义 中 的 字符 串 


o 


@- 一 第 3 章 EREEESEETSEE 有 和 
国 3.1.2 课堂 小 实例 一 一 使 用 数值 型 数据 


数值 型 数据 是 表示 数量 、 可 以 进行 数值 运算 的 数据 类 型 。 数 值 型 数据 由 数字 、 小 数 点 、 正 负 号 和 
表示 乘 早 的 字母 E 组 成 ， 数 值 精度 达 16 位 。 

JavaScript 数 值 类 型 表示 一 个 数字 ， 比 如 5、12、-5、2e5。 数 值 类 型 有 很 多 值 ， 最 基本 的 当然 
就 是 十 进 制 数值 。 除 了 十 进 制 数值 ， 整 数 还 可 以 通过 八进制 或 十 六 进 制 来 表示 。 还 有 一 些 极 大 或 极 
小 的 数值 ， 可 以 用 科学 计数 法 表示 。 

Var numl=10.00; // 使 用 小 数 点 来 写 

var num2=10; // 不 使 用 小 数 点 来 写 


。。 下面 将 通过 实例 讲述 常用 的 数值 型 数据 的 | 
使 用 方法 ， 代 码 如 下 所 示 。 | is 


运行 效果 如 图 3-2 所 示 。 


<script> 
Var X1=5.007 
Var xX2=5; : 上 


Var Y=10e57 


Var Zz=10e-57 : 证 Men RH ER TR 
document .write (xl1 + "<br />") : 图 3-2 输出 数值 
document .write (x2 + "<br />") : 本 例 代码 中 的 var x1=5.00、var x2=5 


document .write(y + "<br />") 


i 行 分 别 定义 十 进 制 数值 ，var y=10e5、var 
i Z=10e-5 行 用 科学 计数 法 定义 数值 ， 最 后 使 
i document.write 输 出 十 进 制 数字 。 


国 3.1.3 课堂 小 实例 一 一 使 用 布尔 型 数据 

布尔 型 数据 只 有 两 个 值 ，true 和 false。 它 主要 用 来 说 明 或 代表 一 种 状态 或 标志 ， 当 数据 间 在 进行 比 
较 或 进行 判断 时 ， 使 用 这 种 类 型 非常 方便 。 

布尔 型 与 C/IC++ 中 的 布尔 型 有 所 不 同 ，C/C++ 中 的 布尔 型 除了 可 以 使 用 ture 或 false， 还 可 以 使 用 1 或 
0。 但 在 Javascript 中 只 能 使 用 true 或 false。 


document .write(z + "<br />") 


</script> 


基本 语法 : | 运行 这 个 示例 ， 就 会 显示 一 个 警告 框 ， 如 
| 图 3-3 所 示 。 因 为 字符 下 message 被 自动 转换 成 

var y=false : 了 对 应 的 Boolean 值 (true) 。 
和 a 

下 面 将 通过 实例 讲述 布尔 型 数据 的 使 用 方 ; ee 
法 ， 代 码 如 下 所 示 。 | NR 

<script> | 委 Value is true 


var message = 'Hello'7 : 
if (message) : 

| 

alert ("Value is true"); : 

} | 图 3-3 警告 框 


</script> 
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中 3.1.4 ”课堂 小 实例 一 一 使 用 Undefined 和 Null 类 型 
在 某 种 程度 上 ，null 和 undefine 都 是 具有 | 


! <script> 
“ 空 值 ”的 含义 ， 因 此 容易 混淆 。 实际 上 -者 人 
具有 完全 不 同 的 含义 。null 是 一 个 类 型 为 null 的 ;var car="hi"; 
对 象 ， 可 以 通过 将 变量 的 值 设置 为 null 来 清空 变 document .write (person + "<br />"); 
量 。 而 Undefined 这 个 值 表示 变量 不 含有 值 。 : document .write (car + "<br />"); 
如 果 定 义 的 变量 准备 在 将 来 用 于 保存 对 象 ， var car=null; 
那么 最 好 将 该 变量 初始 化 为 null 而 不 是 其 他 值 。 这 | document .write(car + "<br />"); 


样 一 来 ， 只 要 直接 检测 null 值 就 可 以 知道 相应 的 变 </script> 
量 是 否 已 经 保存 了 一 个 对 象 的 引用 了 ， 例 如 : | 


Var person 代 码 变量 不 含有 值 ，document. 


tear t= my write(person + "<br />") 输 出 代码 即 为 
{ | Wee 运行 代码 的 效果 如 图 3-4 所 示 。 
// 对 car 对 象 执行 某 些 操 作 | FE Sr 0 i 
} | 全 下 


es 司 uenccip 有 汪汪- 


实际 上 ，undefined 值 是 派生 自 null 值 的 ， | 
因此 ECMA-262 规 定 对 它们 的 相等 性 测试 要 返 | 


回 true 。 

alert (undefined == null); //true 

下 面 将 通过 实例 讲述 Undefined 和 Null 的 使 上 | 
用 ， 代 码 如 下 : : 图 3-4 Undefined 和 Null 


3. 2 合 数据 类 型 


前 面 一 节 讲述 了 基本 的 数据 类 型 ， 本 节 将 介绍 内 置 对 象 、 日 期 对 象 、 全 
局 对 象 、 re 字符 串 对 象 和 数组 对 象 。 


国 3.2.1 常用 的 内 置 对 象 | 

所 有 编程 语言 都 具有 内 部 〈 或 内 置 的 ) 对 象 | So 数学 运算 。 
Be tr 内 部 对 象 是 编写 自 定义 代 | @ Date 对 旬 ， 处 理 日 期 和 时 间 的 存储、 转化 和 
二 . 是 

| 。 表达 。 
码 所 用 语言 的 基础 ， 该 代码 基于 想象 实现 自 定义 功 | Ge 
能 。JavaScipi 有 许多 将 其 定义 为 语言 的 内 部 对 象 。 ， ee 提供 一 个 数组 的 模型 、 存 储 大 量 
ta : 多 Event 对 象 : 提供 JavaScript 事 件 的 各 种 处 
9 是 几 种 最 ， 。 理 信息 。 

常用 的 功能 。JavaScript 内 置 对 象 有 以 下 几 种 。 


肯 3.2.2 课堂 小 实例 一 一 日 期 对 象 
Date 对 象 用 于 处 理 日 期 和 时 间 。 可 以 通过 new 关 键 词 来 定义 Date 对 象 。 
基本 语法 : 


Var curr=new Data(); 
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语法 说 明 : 
利用 new 来 声明 一 个 新 的 对 象 实体 。 : 
date 对 象 会 自动 把 当前 日 期 和 时 间 保存 为 | 
初始 值 ， 参 数 的 形式 有 以 下 5 种 。 


Date ("month dd,yyyy hh:mm:ss"); 
Date ("month dd,yyyy"); 

Date (yyyy.mth, dd, hh,mm, ss); 
Date (yyyy.mth, dd); 


new Date (ms); 


需要 注意 最 后 一 种 形式 ， 参 数 表示 的 是 需 | 


| 例子。 


@ 一 第 3 章 数据 类 型 和 要 量 


dd: 表示 一 个 月 中 的 第 几 天 ， 为 从 1 ~31 的 整数 。 
yyyy: 用 四 位 数 表示 的 年 份 。 

hh: 小 时 数 ， 从 0 (午夜 ) ~23 ( 晚 11 点 ) 的 
整数 。 

mm: 分 钟 数 ， 从 0~ 59 的 整数 。 

Ss: 秒 数 ， 从 0~ :59 的 整数 。 

ms: 毫秒 数 ， 为 大 于 等 于 0 的 整数 。 

下 面 是 使 用 上 述 参 数 形式 创建 日 期 对 象 的 


new Date ("May 12,2013 15:15:32") 7 


new Date ("May 12,2013") 

要 创建 的 时 间 和 GMT 时 间 1970 年 1 月 1 日 之 间 相 | new Date(2013,4,12,17,18, 32); 
差 的 毫秒 数 。 各 种 参数 的 含义 如 下 。 : new Date (2013,4,12); 

@ month: 用 英文 表示 的 月 份 名 称 ， 从 January ; new Date(1178899200000); 

~December 。 : i 
@ mth， 用 整数 表示 的 月 份 ， 从 0 (1 月 ) ~11 (12 : 下 面 的 表 3-1 列 出 了 Date 对 象 的 常用 方法 。 
月 ) 。 
表 3-1 ”Date 对 象 的 常用 方法 
方 法 描述 

getYear() 返回 年 ， 以 0 开始 

getMonth() 返回 月 ， 以 0 开始 

getDate() 返回 日 期 

getHours() 返回 小 时 ， 以 0 开始 

getMinutes() 返回 分 钟 ， 以 0 开始 

getSeconds() 返回 秒 ， 以 0 开始 

getMilliseconds() 返回 毫秒 (0-999) 

getUTCDay() 依据 国际 时 间 来 得 到 现在 是 星期 几 (0-6) 
getUTCFullYear() 依据 国际 时 间 来 得 到 完整 的 年 份 

getUTCMonth() 依据 国际 时 间 来 得 到 月 份 (0-11) 

getUTCDate() 依据 国际 时 间 来 得 到 日 (1-31) 

getUTCHours() 依据 国际 时 间 来 得 到 小 时 (0-23) 

getUTCMinutes() 依据 国际 时 间 来 返回 分 钟 (0-59) 

getUTCSeconds() 依据 国际 时 间 来 返回 秒 (0-59) 
getUTCMilliseconds() 依据 国际 时 间 来 返回 毫秒 (0-999) 

getDay() 返回 星期 几 ， 值 为 0-6 

getTime() 返回 从 1970 年 1 月 1 日 0:0:0 到 现在 一 共 花 去 的 毫秒 数 
setYear() 设置 年 份 ，2 位 数 或 4 位 数 

setMonth() 设置 月 份 (0-11) 

setDate() 设置 日 (1-31) 

setHours() 设置 小 时 数 (0-23) 

setMinutes() 设置 分 钟 数 (0-59) 

setSeconds() 设置 秒 数 (0-59) 

setTime() 设置 从 1970 年 1 月 1 日 开始 的 时 间 ， 毫 秒 数 
setUTCDate() 根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1~31) 
setUTCMonth() 根据 世界 时 设置 Date 对 象 中 的 月 份 (0 一 11) 
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续 表 
方 法 描述 

setUTCFullYear() 根据 世界 时 设置 Date 对 象 中 的 年 份 〈 四 位 数字 ) 
setUTCHours() 根据 世界 时 设置 Date 对 象 中 的 小 时 (0 一 23) 
setUTCMinutes() 根据 世界 时 设置 Date 对 象 中 的 分 钟 (0 一 59) 
setUTCSeconds() 根据 世界 时 设置 Date 对 象 中 的 秒 钟 (0 一 59) 
setUTCMilliseconds() 根据 世界 时 设置 Date 对 象 中 的 毫秒 (0 一 999) 
toSource() 返回 该 对 象 的 源 代码 
toString() 把 Date 对 象 转换 为 字符 囊 
toTimeString() 把 Date 对 象 的 时 间 部 分 转换 为 字符 囊 
toDateString() 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toGMTString() 使 用 toUTCString() 方 法 代替 
toUTCString) 根据 世界 时 ， 把 Date 对 象 转换 为 字符 囊 
toLocaleStrng() 根据 本 地 时 间 格式 ， 把 Date 对 象 转换 为 宇 符 串 
toLocaleTimeString() 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleDateString() 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
UTC() 根据 世界 时 返回 1997 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
valueOf() 返回 Date 对 象 的 原始 值 

实例 代码 ; 

<script language="javascript"> 

i 

var cur = new Date(); // 创建 当前 日 期 对 象 cur 

Var years = cur.getYear(); // 从 日 期 对 象 cur 中 取得 年 数 

Var months = cur.getMonth(); // 取得 月 数 

var days = cur.getDate(); // 取得 天 数 

Var hours = cur.getHours(); // 取得 小 时 数 

var minutes = cur.getMinutes () 7 // 取得 分 钟 数 

Var seconds = cur.getseconds(); // 取得 秒 数 

// 显示 取得 的 各 个 时 间 值 

alert( "此 时 时 间 是 : " + years + "年 " + (months+1) + "月 " 

+ days + "日 " + hours + "时 " + minutes + "分 " 

+ seconds + " 秒 " ); 

-—> 

</script> 

上 面 代 码 中 应 用 Date 对 象 从 电脑 的 系统 时 : [未 和 网 页 的 消 意 [ze 


间 中 获取 当前 时 间 ， 并 利 


日 区 
获取 分 钟 ，getSeconds() 获 取 秒 数 。 
码 ， 效 果 如 图 3-5 所 示 。 


相应 方法 获取 与 时 
间 相 关 的 各 种 数值 。getYear() 方 法 获取 年 份 ， 

getMonth() 方 法 获取 月 份 ，getDate() 方 法 获取 
，getHours() 方 法 获取 小 时 ，getMinutes( 


运行 代 


站 此 时 时 间 是 : 2014 年 8 月 31 日 21 时 57 分 38 秒 


图 3-5 制作 日 期 效果 


@_。 第 3 讲 数 据 类 弄 初 变量 


作 3.2.3 数学 对 象 


作为 一 门 编程 语言 ， 进 行 数学 计算 是 必 | “基本 语法 : 

不 可 少 的 。 在 数学 计算 中 经 常会 使 用 到 数学 | 有 请 

函数 ， 如 取 绝 对 值 、 开 方 、 取 整 、 求 三 角 函 : math. 方 法 

数值 等 ， 还 有 一 种 重要 的 函数 是 随机 函数 。 | - eg 
JavaScript 将 所 有 这 些 与 数学 有 关 的 方法 、 常 | “Ma 由 对 象 并 不 像 Date 和 String 那 样 是 对 铺 


数 、 三 角 函 数 以 及 随机 数 都 集中 到 一 个 对 象 里 | 的 类 ， 因 此 没有 构造 函数 Math()， 像 Math.sin() 
面 一 Math 对 象 。Math 对 象 是 JavaScript 中 的 | 这 样 的 函数 只 是 函数 ， 不 是 某 个 对 象 的 方法 ， 
一 个 全 局 对 象 ， 不 需要 由 函数 进行 创建 ， 而 且 | 无 须 创建 它 ， 通 过 把 Math 作 为 对 象 使 用 就 可 以 
只 有 一个 。 | 调用 其 所 有 属性 和 方法 。 
下 面 的 表 3-2 列 出 了 Math 对 象 的 常用 方法 。 
表 3-2 Math 对 象 的 常用 方法 


abs(x) 返回 数 的 绝对 值 

acos(X) 返回 数 的 反 余弦 值 

asin(x) 返回 数 的 反正 弦 值 

atan(x) 以 介 于 -PI/2 与 PI/2 弧 度 之 间 的 数值 来 返回 x 的 反正 切 值 
atan2(y,x) 返回 从 x 轴 到 点 (X,y) 的 角度 〔 介 于 -Pl/2 与 PI/2 弧 度 之 间 》 
ceil(x) 对 数 进行 上 舍 入 

cos(x) 返回 数 的 余弦 

exp(x) 返回 e 的 指数 

floor(x) 对 数 进行 下 舍 入 

log(x) 返回 数 的 自然 对 数 〈 底 为 e) 

max(x,y) 返回 x 和 y 中 的 最 高 值 

min(x,y) 返回 x 和 y 中 的 最 低 值 

pow(x%,y) 返回 x 的 y 次 震 

andom() 返回 0 ~ 1 之 间 的 随机 数 

round(x) 把 数 四 舍 五 入 为 最 接近 的 整数 

sin(x) 返回 数 的 正弦 。 

sqrt(x) 返回 数 的 平方 根 

tan(x) 返回 角 的 正切 

toSource() 返回 该 对 象 的 源 代码 

valueOf() 返回 Math 对 象 的 原始 值 


下 面 的 表 3-3 列 出 了 Math 对 象 的 属性 。 
表 3-3 ”Math 对 象 的 属性 
属 性 描 述 


E 返回 算术 常量 e， 即 自然 对 数 的 底数 〈 约 等 于 2.718) 
In2 返回 2 的 自然 对 数 〔 约 等 于 0.693) 

In10 返回 10 的 自然 对 数 〈 约 等 于 2.302) 

log2e 返回 以 2 为 底 的 e 的 对 数 〈 约 等 于 1.414) 

log10e 返回 以 10 为 底 的 e 的 对 数 〈 约 等 于 0.434) 

pi 返回 圆周 率 〈 约 等 于 3.14159) 

sqrt1_2 返回 2 的 平方 根 的 倒数 〈 约 等 于 0.707) 

sqrt2 返回 2 的 平方 根 ( 约 等 于 1.414) 
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a=Math sin(1) 使 用 了 Math 对 象 算出 了 弧度 为 
10 的 角度 的 sin 值 ， 运 行 代码 ， 效 果 如 


实例 代码 : 


<script language="javascript"> 
a=Math.sin(1); 
document .write (a) 


</script> 


国 3.2.4 字符 串 对 象 


例 后 才 可 以 引用 


符 串 的 方法 ， 例 如 


和 


String 对 象 是 动态 对 象 ， 需 要 创建 对 象 实 | 


的 方法 都 不 能 改变 字符 串 的 内 容 。 


参数 s 是 要 存储 在 String 对 象 中 或 转换 成 原 


基本 语法 : 


new String(s); 


string(s); 


始 字符 串 的 值 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<script type="text/javascript"> 
Var string="I LOVE YOU " 


document .write ("<p> 把 字符 转换 为 小 写 : 
document .write ("<p> 把 字符 转换 为 大 写 : 


</script> 
</body> 
</html> 


图 3-6 所 示 。 


它 的 属性 或 方法 ， 可 以 把 用 ; 
单 引号 或 双 引 号 括 起 来 的 一 个 字符 串 当 作 一 个 | 
字符 串 的 对 象 实例 来 看 待 ， 也 就 是 说 可 以 直 | 
接 在 某 个 字符 串 后 面 加 上 (.) 去 调 
象 的 属性 和 方法 。String 类 定义 了 大 量 操作 字 | 
从 字符 串 中 提取 字符 或 子 ; 串 。Sting 对 
串 ， 或 者 检索 字符 或 子 串 。 需 要 注意 的 是 ， | @ 
JavaScript 的 字符 串 是 不 可 变 的 ，String 类 定义 | ® 


string 对 


CE TT 


放 的 是 字符 
当 不 上 


图 3-6 ”利用 Math 计 数 sin 值 


当 String() 和 运算 符 new 一 起 作为 构造 函数 
使 用 时 ， 它 返回 一 个 新 创建 的 String 对 象 ， 存 


串 s 或 s 的 字符 串 表 示 。 
new 运 算 符 调用 String() 时 ， 它 只 把 


| s 转 换 成 原始 的 字符 串 ， 并 返回 转换 后 的 值 。 


般 利 


charAt 
indexO 


| 置 ， 从 左 到 右 。 找 不 到 贝 
| @ lastIndexOf (chr) : 返回 指定 子 字符 串 的 


String 对 象 提供 的 函数 来 处 理 字符 
字符 串 的 处 理 主要 提供 了 下 列 方法 。 
(idx) : 返回 指定 位 置 处 的 字符 。 

f (Chr) : 返回 指定 子 字符 
返回 -1 。 


的 位 


位 置 ， 从 右 到 左 。 找 不 到 则 返回 一 


I @@ toLowerCase () : 将 字符 串 中 的 字符 全 部 


转化 成 小 写 。 


®@ toUppe 


rCase () : 将 字符 串 中 的 字符 全 部 


转化 成 大 写 。 


"+ string.to. 


LowerCase() + "</p>") 


"+ string.toUpperCase() + "</p>") 
document .write ("<p> 显 示 为 下 标 : " + string.sub() + "</p>") 

document .write ("<p> 显 示 为 上 标 : " + string.sup() + "</p>") 

document .write ("<p> 将 字符 串 显示 为 链接 : " + string.link ("http://www.xxx.com") + "</p>") 


Sitring 对 象 用 于 操纵 和 处 理 文本 串 ， 可 以 | 
在 程序 中 获得 字符 串 长 度 、 提 取 子 字符 串 ， 
以 及 将 字符 串 转 换 为 大 写 或 小 写字 符 。 运 行 代 : arn 
码 ， 效 果 如 图 3-7 所 示 。 : 


将 字符 宁县 示 为 镑 接 - LLOVE YOU 


已 HARRY 


图 3-7 ”String 对 象 


人 肯 3.2.5 ”数组 对 象 

在 程序 中 数据 是 存储 在 变量 中 的 ， 但 是 ， 如 果 数据 量 很 大 ， 比 如 几 百 个 学 生 的 成 绩 ， 此 时 再 
逐个 定义 变量 来 存储 这 些 数据 就 显得 异常 繁 珊 ， 如 果 通过 数组 来 存储 这 些 数据 就 会 使 这 一 过 程 大 
大 简化 。 在 编程 语言 中 ， 数 组 是 专门 用 于 存储 有 序数 列 的 工具 ， 也 是 最 基本 、 最 常用 的 数据 结构 
之 一 。 在 JavaScript 中 ，Array 对 象 专门 负责 数组 的 定义 和 管理 。 

每 个 数组 都 有 一 定 的 长 度 ， 表 示 其 中 所 包含 的 元 素 个 数 ， 元 素 的 索引 总 是 从 0 开始 ， 并 且 最 大 
值 等 于 数组 长 度 减 1。 

基本 语法 : 

数组 也 是 一 种 对 象 ， 使 用 前 先 创建 一 个 数组 对 象 。 创 建 数 组 对 象 使 用 Array 函 数 ， 并 通过 new 
操作 符 来 返回 一 个 数组 对 象 ， 其 调用 方式 有 以 下 3 种 。 


new Array() 
new Array (len) 
new Array ([item0, [item]l, [item2,…]]]) 


语法 解释 : 

其 中 第 1 种 形式 创建 一 个 空 数组 ， 它 的 长 度 为 0， 第 2 种 形式 创建 一 个 长 度 为 len 的 数组 ，len 的 
数据 类 型 必须 是 数字 ， 否 则 按照 第 3 种 形式 处 理 ， 第 3 种 形式 是 通过 参数 列表 指定 的 元 素 初始 化 一 
个 数组 。 下 面 是 分 别 使 用 上 述 形式 创建 数组 对 象 的 例子 。 

var ObjArray=new Array(); ”// 创 建 了 一 个 空 数组 对 象 

var objarray=new Array(6); ”// 创 建 一 个 数组 对 象 ， 包 括 6 个 元 素 

Var objArray=new Rrray("xn","y"v"z") 7 // 以 "x","y","z"3 个 元 素 初始 化 一 个 数组 对 象 


在 JavaScript 中 ， 不 仅 可 以 通过 调用 Array 函 数 创建 数组 ， 而 且 可 以 使 用 方 括号 “[]” 的 语法 
直接 创造 一 个 数组 ， 它 的 效果 与 上 面 第 3 种 形式 的 效果 相同 ， 都 是 以 一 定 的 数据 列表 来 创建 一 个 数 
组 。 这 样 表示 的 数组 称 为 一 个 数组 常量 ， 是 在 JavaScript1.2 版 本 中 引入 的 。 通 过 这 种 方式 就 可 以 
直接 创建 仅 包 含 一 个 数字 类 型 元 素 的 数组 了 。 例 如 下 面 的 代码 : 

var objArray=[]; // 创 建 了 一 个 空 数组 对 象 

var objArray=[2]; // 创 建 了 一 个 仅 包 含 数字 类 型 元 素 "2" 的 数组 

var objArray=["a","b","c"]; // 以 "a", "b","c"3 个 元 素 初始 化 一 个 数组 对 象 
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实例 代码 ， : 本 例 使 用 sort() 方 法 从 数值 上 对 数组 进行 
<script type="text/javascript"> : 排序 。 原 来 数组 中 的 数字 顺序 是 “8，0，50， 
function sortNumber (a, b) : 30，20000，70”， 使 用 sort 方 法 重新 排序 后 
和 : 的 顺序 是 “0，8，30，50，70，20000”。 最 
return a - b ， 后 使 用 document.write 方 法 分 别 输出 排序 前 后 
} | 的 数字 。 运 行 代码 ， 效 果 如 图 3-8 所 示 。 

Var arr = new Array(6) | 

arr[0] = "8" 

arr[1] = "0" 

arrlt2] = "50" 

arr[t3] = "30" 

arr[4] = "20000" 


arr[5] = "70" 
document .write (arr + "<br />") 
document .write (arr .sort (sortNumber)) 


</script> | 区 PEI 7- CFECT 


图 3-8 使 用 数组 排序 


量 也 称 常数 ， 是 执行 程序 时 保持 常数 值 、 永 远 不 变 的 命名 项 目 。 常 数 
、 数 值 、 条 本 生 竺 、 逻辑 运算 符 或 它们 的 组 合 


We 常量 的 种 类 

在 JavaScript 中 ， 常 量 有 以 下 6 种 基本 类 型 。 

1， 整 型 常量 

JavaScript 的 常量 通常 又 称 字面 常量 ， 它 是 不 能 改变 的 数据 。 其 整 型 常量 可 以 使 用 十 六 进 制 、 
八进制 和 十 进 制 表示 其 值 。 

2. 实 型 常量 

实 型 常量 是 由 整数 部 分 加 小 数 部 分 表示 ， 如 12.32、193.98。 可 以 用 科学 或 标准 方法 表示 : 如 
5E7、4e5 等 。 

3. 布尔 值 

布尔 常量 只 有 两 种 状态 : True 和 False。 它 主要 用 来 说 明 或 代表 一 种 状态 或 标志 ， 以 说 明 操作 流程 

4。 字符 型 常量 

使 用 单 引号 (“) 或 双 引号 〈“) 括 起 来 的 一 个 或 几 个 字符 。 如 "ThisisabookofJavaScript"、 
"3245"、"ewrt234234" 等 。 

5。 空 值 

JavaScript 中 有 一 个 空 值 null， 表 示 什么 也 没有 。 如 果 引 用 没有 定义 的 变量 ， 则 返回 一 个 Null 值 。 


国 3.3.2 课堂 小 实例 一 一 常量 的 使 用 方法 
在 程序 执行 过 程 中 ， 其 值 不 能 改变 的 量 称 为 常量 。 常 量 可 以 直接 用 一 个 数 来 表示 ， 称 为 常数 
(或 称 为 直接 常量 ) ， 也 可 以 用 一 个 符号 来 表示 ， 称 为 符号 常量 。 
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下 面 通过 实例 讲述 字符 常量 、 布 尔 型 常量 和 数值 常量 的 使 用 ， 输 入 如 下 代码 。 


<script language="javascript"> 


< 

document .write ("<1i> 常 量 的 使 用 方法 <br>"”); // 使 用 字符 串 常量 
document .write( "<li>" + 7 + "一 星期 7 天 "”); // 使 用 数值 常量 

if( true ) // 使 用 布尔 型 常量 true 


{ 

document .write ("<br><1i> 布 尔 常量 : " + true ); 

document .write ("<1i> 八 进 制 数 值 常量 012 输 出 为 十 进 制 : "+ 012); // 使 用 8 进 制 常 
量 和 十 进 制 常量 

--> 

</script> 


document.write("<li> 常 量 的 使 用 方法 ! 
<br>") 代 码 使 用 字符 串 常量 ，document.write | 
("<li>" + 7 + "一 星期 7 天 " ) 代 码 使 用 数值 常 :| 
量 7，if (true) 在 if 语句 块 中 使 用 布尔 型 常量 | 
true，document.write( "<li> 八 进 制 数值 常量 | 
012 输 出 为 十 进 制 : " + 012) 代 码 使 用 八进制 数 | 
值 常量 输出 为 十 进 制 ， 运 行 代 码 ， 效 果 如 图 3-9 
所 示 。 : 


图 3-9 常量 的 使 用 方法 


得 012 罗 出 为 十 进 制 ，10 


JavaScript 基 本 数据 类 型 中 变量 的 主要 作用 是 存 取 数 据 、 提 供 存 放 信息 
的 容器 。 对 于 变量 必须 明确 变量 的 命名 、 变 量 的 类 型 、 变 量 的 声明 及 其 变量 的 作用 域 。 


朋 3.4.1 变量 的 含义 i 3.4.2 变量 的 定义 方式 
变量 是 存 取 数字 、 提 供 存 放 信息 的 容器 。 : JavaScript 中 定义 变量 有 两 种 方式 。 
正如 代数 一 样 ，JavaScript 变量 用 于 保存 值 或 ; 1. 使 用 var 关 键 字 定义 变量 ， 如 “var 


表达 式 。 可 以 给 变量 起 一 个 简短 名 称 ， 比 如 x。 | book;”。 
| | 该 种 方式 可 以 定义 全 局 变量 也 可 以 定义 局 部 


X=4 : 
y=5 : 变量 ， 这 取决 于 定义 变量 的 位 置 。 在 函数 体 中 使 
z=g+y ; 用 Var 关键 字 定义 的 变量 为 局 部 变量 ; 在 函数 体外 


一 |; 使 有 var 关键 字 定 义 的 变量 为 全 局 交 量 。 例 如 : 

在 代数 中 ， 使 用 字母 (比如 X) 来 保存 值 二 一 一 一 一 一 一 一 一 一 一 一 
(比如 4) 。 通 过 上 面 的 表达 式 z=x+y， 能 够 计 |; 
算出 z 的 值 为 9。 在 JavaScript 中 ， 这 些 字母 被 | 
称 为 变量 。 : var 代 表 声 明 变量 ，var 是 variable 的 缩写 。 
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Var my=3; 


Var mysite="baidu"; 
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my 与 mysite 都 为 变量 名 (可 以 任意 取 名 )， 必 须 
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使 用 字母 或 者 下 划 线 (_) 开 始 。3 与 "baidu" 都 为 ; 
变量 值 ，3 代 表 一 个 数字 ，"baidu" 是 一 个 字符 | 
串 ， 因 此 应 使 用 双 引号 。 

2. 不 使 用 var 关 键 字 ， 而 是 直接 通过 赋值 | 
的 方式 定义 变量 ， 如 “param="hello"”。 而 在 ; 
使 用 时 再 根据 数据 的 类 型 来 确 其 变量 的 类 型 。 

实例 代码 : 

<html> 

<head> 

<title>test</title> 

<script type="text/javascript"> 

function test() { 

Param = "hello"; 

alert (param); 

alert (param); 

</script> 

</head> 

<body onload="test ()"></body> 

</html> 

param = "hello" 代 码 直接 定义 变 | 
量 ， 


alert(param) 代 码 使 页 面 弹出 提示 框 : 


“hello”， 运 行 代码 ， 效 果 如 图 3-10 所 示 。 


个 函 


性 的 ;函数 的 参数 也 是 局 部 性 的 ， 只 在 函数 内 部 起 作用 。 


相同 


图 3-10 提示 框 


上 3.4.4 课堂 


| 遵循 以 下 规则 
| @ 变量 名 是 严格 区 别 分 小 写 的 ， 如 变量 abc 和 


| 简单 而 且 容易 记忆 的 名 称 。 


变量 的 作用 范围 


目 3.4.3 ”变量 的 命名 规则 


大 家 都 知道 变量 定义 统一 都 是 var， 变 量 


| 命名 也 有 相应 规范 。JavaScript 首 先是 一 种 区 
; 分 大 小 写 的 语言 ， 即 变量 myVar、myVAR 和 
; myvar 是 不 同 的 变量 。 


另外 ， 变 量 名 称 的 长 度 是 任意 的 ， 但 必须 


ABC 是 两 个 变量 ， 可 以 在 程序 分 别 对 其 进行 
明 、 赋 值 和 引用 。 


| @ JavaScript 中 变量 名 必须 以 字母 或 下 划 线 


(_) 打 头 ， 其 余 可 以 包括 数字 、 字 符 和 _， 如 _ 
temp、_abc、example2 就 是 合法 的 变量 名 。 


| @ 不 能 引用 JavaScript 中 的 关键 字 作为 变量 ， 


在 JavaScript 中 定义 了 40 多 个 关键 字 ， 这 些 
关键 字 都 是 JavaScript 内 部 使 用 的 ， 不 能 作 
为 变量 的 名 称 ， 如 var 、true 、int 等 不 能 作为 
变量 名 使 用 。 

下 面 给 出 合法 的 命名 ， 也 是 合法 的 变量 名 。 


total 
_total 
totall0 
total 10 
total n 


下 面 是 不 合法 的 变量 名 。 
12 total 


$ total 
S$# total 


建议 为 了 方便 阅读 ， 变 量 名 可 以 使 用 定义 


在 JavaScript 中 有 全 局 变量 和 局 部 变量 。 全 局 变量 是 定义 在 所 有 函数 体 之 外 ， 其 作用 范围 是 整 
数 ， 而 局 部 变量 是 定义 在 函数 体 之 内 ， 只 对 该 函数 是 可 见 的 ， 而 对 其 他 函数 则 是 不 可 见 的 。 


(1) 全 局 变量 的 作用 域 是 全 局 性 的 ， 即 在 整 
般 定 义 在 “script” 块 中 ， 在 “function ”函数 外 。 


个 JavaScript 程 序 中 ， 全 局 变量 处 处 都 存在 


(2) 而 在 函数 内 部 声明 的 变量 ， 只 在 函数 内 部 起 作用 。 这 些 变 量 是 局 部 变量 ， 作 用 域 是 局 部 


(3) 在 函数 内 部 ， 局 部 变量 的 优先 级 比 同名 的 全 局 变量 优先 级 要 高 。 如 果 存 在 与 全 局 变量 名 称 
的 局 部 变量 ， 或 者 在 函数 内 部 声明 了 与 全 局 变量 同名 的 参数 ， 那 么 该 全 局 变量 将 不 再 起 作用 。 
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实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<Script Language ="JavaScript"> 
ee 
greeting="<hl>how are you</h1l>"; 
welcome="<p>Welcome to <cite>JavaScript</cite>.</p>"; 
| 
</Script> 
</head> 
<body> 
<Script language="JavaScript"> 
i 
document .write (greeting); 
document .write (welcome); 
2 
</Script> 
</body> 
</html> 


greeting="<h1> how are you </h1>" 和 welcome="<p>Welcome to <cite>JavaScript</cite>.</p>" 
声明 了 两 个 字符 串 变 量 ， 最 后 使 用 document.write 语 句 将 两 个 页 面 分别 显 示 在 页 面 中 ， 运 行 代码 ， 效 
果 如 图 3-11 所 示 。 


hello are you 


(Welcome to maserpe 


FEC > EE 


图 3-11 变量 的 作用 


实战 应 用 一 一 制作 倒计时 特效 


@ 倒计时 特效 可 以 让 用 户 可 以 明确 知道 到 某 个 日 期 剩余 的 时 间 ， 制 作 倒 计 
时 特效 的 具体 操作 步骤 如 下 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 3-12 所 示 。 


课堂 实录 “e 一 全 
(2) 在 <body > 与 </body> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 3-13 所 示 。 
<Script Language="Javascript"> 
Var timedate= new Date ("October 1,2013"); 
Var times=" 元 旦 "7 
Var now = new Date(); 
var date = timedate.getTime() - now.getTime(); 
Var time = Math.floor (date / (1000 *60* 60 * 24)); 
3E (tim 2= Oy 3 
document .write ("现在 离 2013 年 "+times+" 还 有 : <font color=red><b>"+time +"</b></font> 天 "); 
</Script> 


会 利用 var date = timedate.getTime() - now.getTime() 可 以 获得 剩余 时 间 ， 由 于 时 间 是 以 毫秒 为 单 
位 的 ， 因 此 时 间 单 位 之 间 的 换算 率 如 下 。 

1 天 =24 小 时 

1 小 时 =60 分 钟 

1 分 钟 =60 秒 

1 秒 =1000 毫 秒 

银 利用 var time = Math floor(date / (1000 * 60 * 60 * 24)) 将 剩余 时 间 转 为 剩余 天 数 。 


图 3-12 打开 网 页 文档 
(3) 保存 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 3-14 所 示 。 


图 3-14 倒计时 效果 
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3 6 课 后 练习 S 


1. 填空 题 
(1) JavaScript 脚 本 语言 同 其 他 语言 一 样 ， 有 它 自 身 的 基本 数据 类 型 、 表 达 式 和 算术 运算 符 
以 及 程序 的 基本 框架 结构 。 在 JavaScript 中 有 4 种 基本 的 数据 类 型 : ~ 、 一 和 


(2) JavaScript 布 尔 类 型 只 包含 两 个 值 ， 真 (true) 和 假 (false) 。 它 用 于 判断 表达 式 的 
(3) JavaScript 将 所 有 这 些 与 数学 有 关 的 方法 、 常 数 、 三 角 函 数 以 及 随机 数 都 集中 到 一 个 对 
象 里 面 是 。 

2. 操作 题 

制作 页 面 显示 当前 日 期 效果 ， 如 图 3-15 所 示 。 


me me ee 


图 3-15 显示 当前 日 期 效果 
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第 4 章 


@ 
© 表达 式 与 运算 符 


本 章 导 读 

运算 符 是 在 代码 中 对 各 种 数 
据 进行 运算 的 符号 ， 例 如 有 进行 
加 、 减 、 乘 、 除 算术 运算 的 运算 
符 ， 有 进行 与 、 或 、 非 、 异 或 逻 
辑 运算 的 运算 符 。 表 达 式 是 由 运 
算 符 和 运算 对 象 及 圆 括号 组 成 的 
一 个 序列 ， 它 是 由 常量 、 变 量 、 
函数 等 用 运算 符 连 接 而 成 的 式 
子 。 表 达 式 是 构成 程序 代码 的 最 
基本 要 素 。 


字符 串 运算 符 
赋值 运算 符 
逻辑 运算 符 
位 运算 符 


©@ 。— 汪汪 表达 式 与 运算 符 


表达 式 是 一 组 可 以 计算 出 一 个 数值 的 有 效 的 代码 的 集合 。 


4.1. 


从 概念 上 讲 ， 有 两 种 表达 式 它们 是 把 一 个 | 
值 赋值 给 一 个 变量 和 那些 可 以 简单 得 到 一 个 值 ; 


的 式 子 。 比 如 ，X=5 就 是 第 一 种 。 这 个 表达 式 


却 并 将 结果 5 赋值 给 一 个 变量 。 
JavaScript 有 如 下 类 型 的 表达 式 。 


使 用 算术 运算 符 ) 。 


@ 字符 串 : evaluates to a character string, 


算 符 ) 。 


@ 多 辑 ， 求 值 结果 为 true 或 false (( 通 常 包 合 加 | 


辑 运 算 符 )。 


@ 对 象 ， 求 值 结果 为 对 象 〈 到 特殊 运算 符 中 查阅 : 


多 种 不 同 的 求 值 结果 为 对 象 的 表达 式 ) 。 
一 个 正则 表达 式 就 是 由 普 


则 表达 式 有 如 下 两 种 方法 。 
第 一 种 方法 : 


Var reg = /pattern/; 


操作 数 


@ 操作 数 是 进行 运算 的 常量 或 变量 。 如 下 代码 ， 常 量 2 和 


2+3 


在 以 下 代码 中 ， 变 量 x 与 常量 


@ 算术 求 值 结果 为 数字 ， 例 如 3.14159 (通常 | 


例如 ，“Fred”or“234” (通常 使 用 字符 申 运 | 


10 都 是 操作 数 。 


第 二 种 方法 : RegExp 是 正则 表达 式 的 缩 
写 。 当 检索 某 个 文本 时 ， 可 以 使 用 一 种 模式 来 


| 描述 要 检索 的 内 容 。RegExp 就 是 这 种 模式 。 

“=» 运 算 符 把 值 57 赋 值 给 变 呈 xX。 这 个 表达 | GAAS 
式 自己 的 值 等 于 5。 而 代码 3 + 2 则 是 第 二 种 表 | 
达 式 ， 这 个 表达 式 用 “+” 运 算 符 把 3 和 2 相 加 | 


Var reg = new RegExp('pattern'); 


实例 代码 : 


<script type="text/javascript"> 
function execReg (reg, str) 

{ var result = reg.exec(str); 
alert (result); } 

Var reg = /test/; 

var str = 'teststring'; 

execReg (reg, str); 


</script> 


最 终 将 会 输出 test， 因 为 正则 表达 式 reg 会 
: 匹配 str( “testString，) 中 的 “test， 子 字符 串 ， 
通 字符 以 及 特殊 | 并且 将 其 返回 ， 运 行 代码 ， 效 果 如 图 4-1 所 示 。 
字符 〈 称 为 元 字符 ) 组 成 的 文字 模式 。 该 模式 | = 
描述 在 查找 文字 主体 时 待 匹配 的 一 个 或 多 个 字 | 
符 串 。 正 则 表达 式 作为 一 个 模板 ， 将 某 个 字符 | 
模式 与 所 搜索 的 字符 串 进行 匹配 。 创 建 一 个 正 


图 4-1 表达 式 


常量 3 都 是 操作 数 。 


X=10 


在 以 下 代码 中 ， 
X=10+20 


变量 X、 常 量 10 和 常量 


20 都 是 操作 数 。 
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课堂 实录 “e 一 他 
3 运算 符 介绍 
@ 


运算 符 是 完成 操作 的 一 系列 符号 ， 在 JavaScript 中 有 赋值 运算 符 、 算 术 
运算 符 、 字 符 串 运 算 符 、 逻 辑 运 算 符 、 比 较 运 算 符 、 条 件 运算 符 及 位 运算 符 。 


从 4.3.1 运算 符 国 4.3.2 操作 数 的 类 型 
运算 符 是 一 种 用 来 处 理 数据 的 符号 ， 日 常 | 运算 符 所 连接 的 是 操作 数 ， 而 操作 数 也 


算数 中 所 用 到 的 “+”、“-”、“X”、“ 二 ”都 | 就 是 变量 或 常量 。 变 量 和 常量 都 有 一 个 数据 类 
属于 运算 符 。 在 JavaScript 中 的 运算 符 大 多 也 是 | 型 ， 因 此 ， 在 使 用 运算 符 创建 表达 式 时 ， 一 定 
用 这 样 一 些 符号 所 表示 ， 除 此 之 外 ， 还 有 一 些 ; 要 注意 操作 数 的 数据 类 型 。 每 一 种 运算 符 都 要 


运算 符 是 使 用 关键 字 来 表示 的 。 | 求 其 作用 的 操作 数 符合 某 种 数据 类 型 。 
1.， JavaScript 具 有 下 列 种 类 的 运算 符 : 算术 最 基本 的 赋值 操作 数 是 等 号 (=) ， 它 会 


运算 符 、 等 同 运算 符 与 全 同 运算 符 、 比 较 运算 符 。 | 将 右 操作 数 的 值 直接 赋 给 左 操作 数 。 也 就 是 
2. 目的 分 类 : 字符 串 运算 符 、 逻 辑 运 算 | 说 ，x= y 将 把 y 的 值 赋 给 x。 运 算 符 “=” 用 于 给 

符 、 逐 位 运算 符 和 赋值 运算 符 。 JavaScript 变量 赋值 。 算 术 运算 符 “+” 用 于 把 
3， 特 殊 运算 符 : 条 件 运算 符 、type of 运算 ; 值 加 起 来 。 例 如 : 


符 、 创 建 对 象 运算 符 new、delete 运 算 符 、void | y= 
运算 符号 和 去 号 运算 符 。 | 
算术 运算 符 ， 十 、-、*、/、%、++、 一 7 


等 同 运算 符 与 全 同 运 算 符 : ==、===、 | 
l==、!=== 在 以 上 语句 执行 后 ，x 的 值 是 7。 
比较 运算 符 : <、>、<=、>= | 
字符 串 运 算 符 : <、>、<=、>=、=、 十 
逻辑 运算 符 : &&、||、! 
赋值 运算 符 : =、+=、*=、-=、/= 


算术 运算 符 


@ 算术 运算 符 使 用 数值 作为 操作 数 并 返回 一 个 数值 。 标 准 的 算术 运算 符 就 是 
加 、 减 、 乘 、 除 (+、-、”、/)。 当 操作 数 是 浮 点 数 时 ， 这 些 运算 符 表现 得 跟 它们 在 大 多 数 编程 语言 中 一 样 。 


作 4.4.1 课堂 小 实例 一 一 加 法 运算 符 
JavaScript 中 加 法 运算 符 (+) 是 将 数字 表达 式 的 值 加 到 另 一 数字 表达 式 上 ， 或 连接 两 个 字符 
串 。 使 用 方式 : 其 中 result 是 任何 变量 。expression1 是 任何 表达 式 。expression2 是 任何 表达 式 。 
语法 说 明 : 


result = expressionl + expression2 


和 
十 


于 


中 result 是 任何 变量 。 
expression1 是 任何 表达 式 。 
expression2 是 任何 表达 式 。 
例如 : 
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表达 二 三 运 筑 符 


<script language="javascript"> 


<!-- 


Var i=8; 
Var X=i+27 


document .write( x ); 


--> 

</script> lH 

这 里 将 8 赋值 给 |， 运 行 加 法 运算 x=i+2， 使 用 | 芭 | 
documentwrie(x) 脸 出 结果 X 为 10， 如 图 42 所 示 。 | 图 4-2 加 法 运算 
用 4.4.2 课堂 小 实例 一 一 减法 运算 符 

减法 运算 符 (-) 是 一 个 二 元 运算 符 ， 可 以 | 将 8 赋值 给 ij， 运 行 减法 运算 var x=i-2， 使 
对 两 个 数字 型 的 操作 数 进行 相 减 运算 ， 返 回 第 1 ; | 用 document write x ) 输 出 结果 x 为 6， 如 图 4-3 
个 操作 数 减 去 第 2 个 操作 数 的 值 。 | 所 示 。 

语法 说 明 : : 震 DNevescnpt 风 本 开 愉 全 二 9 守 实录 \ 归 D4442html- Windows lntemet Erplerer 三 | 


©O©O Ve ovwescipuaRG7FX5Rt 二 “| 4| x | ga 
| SHn Wan sv taiA TA Wel 
如 9 入 DYavasqip! 风 区 信守 开 发 实 各 染 基 交 和 效果 


result = expressionl - expression2 | 


其 中 result 是 任何 数值 变量 。 
expression 是 任何 数值 表达 式 。 
例如 : 


<script language="javascript"> 
0 


var i=8; / /赋值 给 i 值 8 | 图 4.3 we 一 一 

Var x=i-2; 

document .write( x ); // 输 出 x 

--> 

</script> 
M4.4.3 深 学 小 实例 乘法 运算 符 

乘法 运算 符 (*) 是 一 个 二 元 运算 符 ， 可 以 | 将 8 赋值 给 |， 运 行 乘法 运算 var x=i*2， 使 

对 两 个 数字 型 的 操作 数 进行 相 乘 运算 ， 返回 两 | ; 用 document write( x ) 输 出 结果 x 为 16， 如 图 4-4 
个 操作 数 之 积 。 操 作 数 类 型 要 求 为 数值 型 。 。 ; 所 示 。 

例如 : : TIE 


OO |e ousrvanerrsssr @ -|4|x sn 
EEC EU 


<script language="javascript"> ! [em | 
<!-—— i lls 


var i=8; // 赋 值 给 i 值 8 
Var x=i*2; : 
document .write( x ); // 输 出 x 

三 > 


</script> 
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课堂 实录 “e 一 他 
国 4.4.4 课堂 小 实例 一 一 除法 运算 符 


除法 运算 符 〈/) 是 一 个 二 元 运算 符 ， 可 以 | 将 8 赋值 给 |， 运 行 除法 运算 var x=i/2， 使 用 
对 两 个 数字 型 的 操作 数 进行 相 除 运算 ， 返 回 第 1 | documentwrite( x ) 脸 出 结果 x 为 4， 如 图 4-5 所 示 。 
个 操作 数 除 以 第 2 个 操作 数 的 值 。 例 如 : 国王 三 
! | a pvcpanesasn @ -|x ld ns EE 
<script language="jJavascript"> | | 一 i 
I | | 
Var i=8; | | 
Var x=i/2; 
document .write( x ); 
-> 
</script> 
= 一 计 夏 负 | 全 六 模式 本 用 凡 100% 


国 4.4.5 “课堂 小 实例 一 一 取 模 运算 符 


取 模 运算 符 ， 用 百 分 号 (%) 表 示 。 如 果 运 算数 ; 使 用 document.write( x ) 输 出 结果 x 为 1， 如 图 


都 是 数字 ， 执 行 常规 算术 除法 运算 ， 返 回 余数 。 ; 4-6 所 示 。 


图 4-5 除法 运算 符 


如 果 运 算数 是 非 数 字 的 类 型 ， 则 转换 成 数字 。 | [Bev ram er oe el 
| © re ovwsoipvanezTxsRe -|x jg ens | 
<script language="javascript"> : | -一 | 
= | 
Var ji=117 


Var x=i%2; 

document .write( x ); 
二 二 

</script> 


着 计 呈 | 是 3- 梧 芒 本 有 


入 ”00% 


将 11 赋 值 给 |， 运行 取 模 运算 var x=i%2， | 


| 课堂 小 实例 一 一 负 号 运算 符 


图 4-6 取 模 运算 符 


运算 符 (-) 是 一 个 一 元 运算 符 ， 可 以 ; 用 document.write( x ) 输 出 结果 Xx 为 -15， 如 图 


ad 即将 一 个 正 数 转换 | i; 4-7 所 示 。 


成 相应 的 负数 ， 也 可 以 将 一 个 负数 转换 成 相应 


的 正 数 。 例 如 : 


<script language="javascript"> 


和 二 = 

Var i=15; // 正 数 
Var zx=-i; // 取 反 
document .write( x ); // 输 出 x 
—-> 

</script> 


三 于 司 


EEC 


将 15 赋 值 给 i， 运 行 取 反 运 算 var x=- 使 | 
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图 4-7 取 反 运算 


@~。 第 4 章 
作 4.4.7 ”课堂 小 实例 一 一 正 号 运算 符 
正 号 运算 符 (+) ， 该 运算 符 不 会 对 操作 | document write( x ) 输 出 结果 x 仍 为 8， 如 图 4-8 
数 产生 任何 影响 ， 只 会 让 源 代码 看 起 来 更 清 | 所 示 。 
楚 。 例 如 : : 


<script language="javascript"> 


= 
var i=8; 
Var x=+i; 


document .write( x ); 


Ee 

</script> : . 
Ee PE TIE 

将 8 赋值 给 ij， 运行 正 号 运算 var x=+i， 使 用 | 国 4.8 正 号 运算 


国 4.4.8 ”课堂 小 实例 一 递增 运算 符 


递增 运算 符 〈++) 是 单 模 操作 符 ， 因 此 它 } 


三 二 

的 操作 数 只 有 一 个 。 比 如 i++ 和 ++i， 所 做 的 运 ;</script> 

算 都 是 将 操作 数 加 1。 如 果 “++” 位 于 运算 数 | 
之 前 ， 先 对 运算 数 进行 增 量 ， 然 后 计算 运算 数 ; var X-i**+ 是 先 将 变量 的 值 赋值 给 变量 x 之 
增长 后 的 值 。 如 果 “++” 位 于 运算 数 之 后 ， 应 : 后 ， 再 对 X 进 行 递增 操作 。var x=++i 是 先 将 变 
先 使 用 再 递增 。 例 如 量 i 进行 递增 操作 后 再 将 变量 i 的 值 赋 给 变量 X， 


i 所 以 运行 结果 如 图 4-9 所 示 。 


<script language="javascript"> 


[= 


var i=15; 


Var Xx=i++; 
document .write( i +"<br>"); 
document .write( x +"<br>"); 
Var i=15; 


Var x=++i; 


document .write( i +"<br>"); 


; | 三 nr 


图 4-9 递增 运算 


document .write( x +"<br>"); 


咱 4.4.9 课堂 小 实例 一 一 递减 运算 符 
递减 运算 符 也 是 单 模 操作 符 ， 其 操作 数 只 

有 一 个 ， 它 的 作用 和 递增 操作 符 正好 相反 ,是 } 

将 操作 数 减 1， 也 可 以 将 操作 数 放 在 前 面 或 后 | 


document .write( i +"<br>"); 


document .write( x +"<br>"); 


var i=15; 
面 ，i- 和 -都 是 合法 的 。 例 如 | 
<script language="javascript"> : document .write( i +"<br>"); 
i : document .write( x +"<br>"); 
var i=15; : SS 
Var x=i-——; | </script> 
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JavaScript 网 页 设计 与 网 站 特效 畏 让 到 本 二 
var X=i-- 是 先 将 变量 的 值 赋值 给 变量 x 之 ; 
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后 ， 再 对 X 进 行 递减 操作 。var x=--i 是 先 将 变量 | 


i 进 行 递 减 操作 后 再 将 变量 i 的 值 赋 给 变量 x， 所 : 


以 运行 结果 如 图 4-10 所 示 。 


4.> 


|B OVe rp WereEpom [eal EE 
OO |e oueascipmREsTRSR9 @ - [x | sn 2"| 
TH SR EV IT 

室 本 =。 蔽 DVavas io! 同性 如实 于 3 委 、 


FE SEE 


图 4-10 递减 运算 符 


关系 运算 符 


关系 运算 符 又 称 比较 运算 符 ， 


它 是 反映 操作 数 之 问 关系 的 一 类 运算 符 的 


总 称 。 这 类 运算 符 通常 是 双 目的 ， 并 且 返 回 的 表达 式 值 类 型 为 布尔 型 。 在 JavaScript 中 关系 运算 符 


包括 大 小 关系 检测 、 等 值 关系 检测 等 类 型 。 


肝 4.5.1 
相等 运算 符 〈==) 是 先进 行 类 型 转换 再 测 
试 是 否 相等 ， 如 果 左 操作 数 等 于 右 操作 数 ， 则 
返回 true， 否 则 返回 false。 
基本 语法 : 


expl == 


exp2 
expl != 


实例 说 明 : 


<script 
二 
var a = "10"; 

Var b 10; 

Var c= 11; 

if (a==b) 

document .write ("a 等 于 b<br>"); 

} 

XLS 

{document .write ("a 不 等 于 b<br>"); } 
if (b== c) 

document .write ("b 等 于 c<br>") ; 

} 

else 

{document -write ("b 不 等 于 c<br>"); } 
-—> 


exp2 


language="javascript"> 


</script> 


课堂 小 实例 一 一 相等 运算 符 


== 运 算 符 判断 exp1 和 exp2 是 否 相等 ， 如 果 
相等 的 话 返 回 值 为 true ( 真 )， 如 果 不 相等 的 


; 话 返 回 值 为 false〈 假 ) 。!= 运 算 符 判断 exp1 和 


| exp2 是 否 不 等 ， 如 果 不 相 等 的 话 返回 值 为 true 


( 真 ) ， 如 果 相 等 的 话 返 


回 值 为 false ( 假 〉。 


| 对 数值 和 字符 串 都 能 使 用 该 运算 符 。 


//a、b 发 生 类 型 转换 


// 如 果 a=b 输 出 a 等 于 b 


// 否 则 输出 a 不 等 于 b 


// 如 果 b=c 输 出 b 等 于 c 


// 否 则 输出 b 不 等 于 c 


和 表达 二 三 运算 生 
相等 运算 符 并 不 要 求 两 个 操作 数 的 类 型 都 | [下 和 3 
一 样 ， 相 等 运算 符 会 将 字符 来 "10" 与 数字 10 认 | | a we sno eww 305i == = 
为 是 两 个 相等 的 操作 数 ， 运 行 代码 的 效果 如 图 : | 二 | 
4-11 所 示 。 : b 不 等 于 | 
中 
| 
| 
图 4-11 相等 运算 
咱 4.5.2 课堂 小 实例 一 -等同 运算 符 


等 同 运算 符 〈 
也 是 一 


) 与 相等 运算 符 类 似 ， 


行 测试 ， 如 果 左 操作 数 等 于 右 操 作 数 ， We 
= true， 否 则 返回 false 。 


基本 语法 : 
expl === exp2 
expl !== exp2 


当 数 值 和 字符 串 互相 比较 的 时 候 ，== 运 算 


符 与 上 = 运算 符 都 会 自动 转换 类 型 并 进行 判断 ， | 
| 为 数字 10 和 字符 串 "10" 是 相 


| 运算 符 进行 比较 时 ， 认 为 数字 10 和 字符 串 "10" 
: 是 不 同 的 ， 运 行 代码 的 效果 如 图 4-12 所 示 。 


而 === 运 算 符 与 |== 运 算 符 则 不 进行 自动 转换 ， 
数值 与 字符 串 的 比较 结果 永远 是 false。 


<script language="javascript"> 


个 二 元 运算 符 ， 同 样 可 以 比较 两 个 操作 | 
ee 此 运算 符 不 进行 类 型 转换 而 直接 | 


{document .write ("a 不 等 于 b<br>"); } 
if ( b === c) 

{ 

document .write ("b 等 于 c<br>"); 

else 

{document .write ("b 不 等 于 c<br>"); } 
= 

</script> 


JavaScript 在 使 用 相等 运算 符 比较 时 ， 认 
同 的 ， 而 使 用 等 同 


: i | 
Ce ! OO emonnasisas @ -oxen ER 
;|[ smn a Sev a TR WA 3 
var a = "8"; HE 。 古 二 5 
var p= 8; [2 | 
由 
var c= 10; | 
if (a===b) | 
i | 
document .write ("a 等 于 b<br>"); | 
|: | 
lse Es 巍 计 丰 记 | 全 六 本 区 本 机 或 10o% w 用 
了 图 4-12 等 同 运算 符 
器 4.5.3 ”课堂 小 实例 
不 等 于 〈!=) 操作 符 先 进行 类 型 转换 再 测试 是 否 不 相等 ， 如 果 左 操作 数 不 等 于 右 操 作 数 ， 则 


返回 true， 


否则 返 


回 false。 例 如 : 


I 刘 涯 实录 。。 一 合 
只 有 不 等 运算 符 左右 的 操作 数 不 相等 才 会 
true， 否 则 返回 false， 运 行 代码 的 效果 如 
图 4-13 所 示 。 


EE FFE Wonder Itendt Priorer 


<script language="javascript"> 


疯 


<!—— 


Var a= 8; 


Var b= 8; 


TE 0 a = hb ) 


ii 
document .write ("a 等 于 b<br>"); 
} 
else 


{document .write ("a 不 等 于 b<br>"); } 


Var C = 10°; | 


a ! |E PEE 2] ET 
{ | 图 4-13 不 等 运算 符 

document .write ("b 等 于 c<br>") 7 

} 

else 

{document .write ("b 不 等 于 c<br>"); 】} 
Es 


</script> 


国 4.5.4 课堂 小 实例 一 一 不 等 同 运算 符 
不 等 同 运算 符 (! ==) ， 此 运算 符 不 进行 类 型 转换 直接 测试 ， 如 果 左 操作 数 不 等 于 右 操作 数 则 


返回 true， 否 则 返回 false。 例 如 : 
<script language="javascript"> : 运行 代码 的 效果 如 图 4-14 所 示 。 
Pe | 大 RE | 


var a= 8; 


var p= 8; 


var C = 10; 

if (a !==b) 

1 

document .write ("a 等 于 b<br>"); 
SESe 


至 ET 7 0% 


图 4-14 不 等 同 运算 符 


{document .write ("a 不 等 于 b<br>"); } 


if ( b !== c) 

{ 

document .write ("b 等 于 c<br>"); 
else 


{document .write ("b 不 等 于 c<br>"); } 
> 
</script> 


i. | 
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二 人 E 肖 表达 式 己 运算 符 


人 4.5.5 ”课堂 小 实例 一 一 小 于 运算 符 
小 于 运算 符 〈<) ， 如 果 左 操作 数 小 于 右 | 。。 将 10 赋 值 给 8， 将 15 赋 值 给 b， 因 为 a<b， 
操作 数 ， 则 返回 true， 否 则 返回 false。 例 如 : 。 | 所 以 输出 a 小 于 b， 运 行 代码 的 效果 如 图 4-15 所 示 。 


<script language="javascript"> l BE We ae ey 
EE | 
var a = 10; // 将 10 赋 值 给 a : DN | 
ee oy SE // 将 15 赋 值 给 b i 
Tf ( ab le) // 判 断 a 是 否 小 于 b 
{ _ document .write ("a 小 于 b<br>"); } 
ES ;i 
{document .write ("a 不 小 于 b<br>"); } : Pp 
ER E l= 乔 计 下 几 | 模式 可 币 柱 " 0% ~ 
Se | 图 4-15 小 于 运算 符 
仆 4.5.6 课堂 小 实例 一 一 大 于 运算 符 
大 于 运算 符 (>) ， 如 果 左 操作 数 大 于 右 将 10 赋 值 给 a， 将 15 赋 值 给 59， 因 为 a<b， 
操作 数 ， 则 返回 true， 和 否则 返回 false。 例 如 : 。 ; 所 以 输出 a 不 大 于 b， 运 行 代码 的 效果 如 图 4-16 


| 所 示 。 


<script language="javascript"> 


= 、 
<! | ey Ee VymsnipmnRF TSR @ > | x lO sng ED 


Er TT 


var a= 10; 二 emx) [ 病 本 


war be= SF : aT 大 于 b 

if ( a>b ) | 

{ document .write ("a 大 于 b<br>"); } : a 

else : 

{document .write ("a 不 大 于 b<br>"); } 

Emi 

</acripty | 区 HN | Sn 五 "Aiaw | 

| 图 4-16 大 于 运算 符 

用 4.5.7 课堂 小 实例 一 一 小 于 或 等 于 运算 符 

小 于 或 等 于 运算 符 (<=) ， 如 果 左 操作 : 将 10 赋 值 给 a， 将 15 赋 值 给 b， 因 为 ab， 所 以 输 
数 小 于 等 于 右 操作 数 ， 则 返回 true， 否 则 返回 : 出 a 小 于 等 于 b， 运 行 代 码 的 效果 如 图 4-17 所 示 。 
false。 例 如 : | ET = 
一 es ||x [th srv | 


SE re SH Sa SE CR TR WR | 
<script language="javascript"> 

<!—— 

var a = 1T0? 


Var b = 15; 


if ( a<=b ) 

{ ， document .write ("a 小 于 等 于 b<br>"); } 

ELSE ! 

{document .write ("a 大 于 b<br>"); } 1 

二 = FEE TE 三、 100% 

</script> - 
图 4-17 小 于 或 等 于 运算 符 


JavaScript 网 页 设计 与 网 站 特效 思 守 EE 必 寺 se] 
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朋 4.5.8 


大 于 或 等 于 运算 符 〈>=) ， 如 果 左 操作 | 
数 大 于 等 于 右 操作 数 ， 则 返回 true， 否 则 返回 | 


课堂 小 实例 一 一 大 于 或 等 于 运算 符 


将 15 赋 值 给 a， 将 15 赋 值 给 5， 因 为 a=b， 
所 以 输出 a 大 于 等 于 b， 运 行 代码 的 效果 如 图 


false。 例 如 : | 4-18 所 示 。 
<script language="jJavascript"> | 五 FE Wd ena olorer Es) 
1 ! | fe ovoasnipwamesTsasge @ ~ [x | sn 2 7 
0 HH WM SV WEAN IAT Vw) ] 
Wa = aa 
于 等 fb 
var b= 15 
if ( a>=b ) 


上 ! 
document .write ("a 大 于 等 于 b<br>"); : | 


. 


也 计 和 | 各 于 下 


图 4-18 大 于 或 等 于 运算 符 


从 ”100% ， 


尝 归 小 实例 字符 串 运 算 符 


于 字符 串 值 的 操作 符 还 有 连接 操 


else ! 一 
{document .write ("a 小 于 b<br>"); } | 
--> 
= 
4. 6 字符 串 运算 符 除了 比较 操作 符 ， 可 应 | 
作 符 (+) ， 它 会 将 两 个 字符 串 连 接 在 一 起 ， 并 返回 连接 的 结果 


“+” 运 算 符 用 于 把 文本 值 或 字符 串 变量 加 起 来 (连接 起 来 )。 如 需 把 两 个 或 多 个 字符 串 变量 
连接 起 来 ， 即 可 使 用 “+” 运 算 符 。 要 想 在 两 个 字符 串 之 间 增 加 空格 ， 需 要 把 空格 插入 到 一 个 字符 


串 之 中 ， 例 如 : 


<script language="javascript"> 
过 二 二 

Var txtl="how "7 

Var txt2="are you"; 

var txt3=txtl+" "+txt2; 
document .write( "输出 变量 txt3: 


-> 


WW 


</script> 


在 以 上 语句 执行 后 ， 变 量 txt3 包含 的 值 是 ; 
how are you， 如 图 4-19 所 示 。 | 


4 @ 赋值 运算 符 =) 的 作用 是 


变量 。JavaScript 的 赋值 运算 符 不 仅 可 上 
成 混合 赋值 运算 符 。 


| | aa wee mm aay IRD wem | 
HE 
| 中 续 册 六 nt bow mm 


OO Bovemnnmesen -|X| mo 


FS 


EECEE 


图 4-19 字符 串 运算 符 


赋值 运 算 符 


给 


征 避 


个 变量 赋值 ， 即 将 某 个 数值 指定 给 某 个 


于 改变 变量 的 值 ， 还 可 以 和 其 他 一 些 运算 符 联合 使 用 ， 构 


= 将 右边 的 值 赋 给 左边 的 变量 。 

+= 将 运算 符 左边 的 变量 递增 右边 表达 式 的 值 。 

一 = 将 运算 符 左边 的 变量 递减 右边 表达 式 的 值 。 

* 二 将 运算 符 左 边 的 变量 乘 以 右边 表达 式 的 值 。 

/一 将 运算 符 左 边 的 变量 除 以 右边 表达 式 的 值 。 

%== 将 运算 符 左 边 的 变量 用 右边 表达 式 的 值 求 模 。 

久 = 将 运算 符 左边 的 变量 与 右边 表达 式 的 值 按 
位 与 。 


位 或 。 


@ “= 将 运算 符 左边 的 变量 与 右边 表达 式 的 值 按 位 | 


异 或 。 
<<= 将 运算 符 左边 的 变量 左 移 ， 具 体位 数 
右边 表达 式 的 值 给 出 。 


| @ >>= 将 运算 和 


表达 式 三 运算 符 


村 左边 的 变量 右 移 ， 具 体位 数 
右边 表达 式 的 值 给 出 。 


| @ >>>- 将 运算 符 左边 的 变量 进行 无 符号 右 移 ， 


具体 位 数 由 右边 表达 式 的 值 给 出 。 
赋值 表达 式 的 值 也 就 是 所 赋 的 值 。 例 如 ， 


:x=(y+=z) 就 相当 于 (y=y+z), 相当 于 x=y+z,， 
; x 的 值 由 于 赋值 语句 的 变化 而 不 断 发 生变 化 ， 而 


i y 的 值 始终 不 变 。 
@ 1- 将 运算 符 左边 的 变量 与 右边 表达 式 的 值 按 } 


下 面 举 一 些 例子 来 说 明 赋值 运算 符 的 


设 a=3 b=2 
at-b=50a==b=L 
a*=b=6 a/=b=1.5 
ag=b=1 a&=b=2 


法 。 


逻辑 运算 符 


@ 逻辑 运算 符 通常 用 来 执行 布尔 代数 。 它 们 常 和 比较 运算 符 一 起 使 用 ，| 
来 表示 复杂 的 逻辑 条 件 。 这 些 运 算 要 涉及 多 个 变量 ， 而 且 常 用 于 if、while 和 for 语 句 。JavaScript 支 


持 的 逻辑 运算 符 包括 逻辑 与 (&&) 、 逻 辑 或 || ) 和 逻辑 非 (D) 。 


国 4.8.1 


课堂 小 实例 一 一 逻辑 与 运 


算 符 


逻辑 与 运算 符 (&&) 要 求 左右 两 个 操作 数 的 值 都 必须 是 布尔 值 。 逻 辑 与 运算 符 可 以 对 左右 两 
个 操作 数 进行 AND 运 算 ， 只 有 左右 两 个 操作 数 的 值 都 为 真 〈true〉 时 ， 才 会 返回 true。 如 果 其 中 一 
个 或 两 个 操作 数 的 值 为 假 (false) ， 其 返回 值 都 为 false。 


实例 说 明 : : Xx 和 y 都 等 于 5，z 等 于 2， 所 以 y 并 不 等 于 
<script language="javascript"> | z， 运 行 代码 的 效果 如 图 4-20 所 示 。 
Var x= 5; // 将 5 赋值 给 x | OO i 
var y= 5; // 将 5 赋值 给 y | a 轩 TD 
Var z= 2; // 将 2 赋值 给 z ke 
if (x==y &&y==z) 
{ 由 
document .write( "true" ) | 
1 | 
else B | 
{ document.write ( "false" ) } ! | 匡 | 本 本 = Wow 
</script> : 图 4-20 逻辑 与 运算 符 

且 4.8.2 ”课堂 小 实例 一 一 逻辑 或 运算 符 


逻辑 或 运算 符 〈||) 要 求 左右 两 个 操作 数 的 值 都 必须 是 布尔 值 。 逻 辑 或 运算 符 可 以 对 左右 两 个 


操作 数 进行 OR 运 算 ， 只 有 左右 两 个 操作 数 的 值 都 为 假 (false) 时 ， 才 会 返回 false。 如 果 其 


中 一 个 


或 两 个 操作 数 的 值 为 真 (true) ， 其 返回 值 都 为 true。 
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JavaScript 网 页 设计 与 网 站 特效 因 让 荆 相 二 


基本 语法 : | X 和 y 都 等 于 5， 执 行 逻辑 或 运算 符 的 效果 

result = expressionl || expression2 : 如 图 4-21 所 示 。 
ET 后 加 

Ke ! Dyavas aioe [x | | 昌 smc ER 

result 是 任何 变量 。 | ER | 

expression1 是 任何 表达 式 。 站 

expression2 是 任何 表达 式 。 

实例 说 明 : 

<script language="javascript"> 

Var x= 57 ! | ® 

Var Y= 57 

War Y= 2 3 FECES Er 


if(x==y | | y==z) 
document .write( "true" ) 
i 

else 

ti 

document .write 
} 


( "false" ) 


图 4-21 远 辑 或 运算 符 


</script> 
用 4.8.3 ”课堂 小 实例 一 一 逻辑 非 运算 符 


JavaScript 中 逻辑 “ 非 ” 运 算 符 (!) 是 对 | 要 求 将 操作 数 放 在 运算 符 之 后 ， 并 且 操 作 数 的 


一 个 表达 式 执行 逻辑 非 运算 。 值 必须 是 布尔 型 。 逻 辑 非 运 算 符 可 以 对 操作 数 
基本 语法 : | 进行 取 反 操作 ， 如 果 运 算数 的 值 为 trtue， 取 反 
le = ree i 操作 之 后 的 结果 为 false; 如 果 运 算数 的 值 为 


其 中 result 是 任何 变量 。 
expression 是 任何 表达 式 。 


逻辑 非 运算 符 (!) 是 一 个 一 元 运算 符 ， 


位 操作 是 程序 设计 


”false， 取 反 操作 之 后 的 结果 为 true。 例 如 : 


!true=false 


1false=true 


4.9 


h 对 位 模式 按 位 或 二 进 制 数 的 一 元 和 二 元 操作 。 在 


许多 古老 的 微 处 理 器 上 ， 位 运算 比 加 减 运 算 略 快 ， 通 常 位 运算 比 乘除 法 运算 要 快 很 多 。 


进 制 的 9 就 是 二 进 制 的 1001。 


准 的 JavaScript 数 值 。 
月 4.9.1 课堂 小 实例 一 一 位 与 运算 符 


位 与 运算 符 〈&) 是 
只 有 两 个 操作 数 中 相对 应 的 位 都 为 1 时 ， 该 结果 中 的 这 一 位 才 为 1， 
即 0&0=0; 0&1=0; 1&0=0; 1&1=1 


否则 为 0。 


例如 ,十 


位 操作 符 在 执行 的 时 候 会 以 二 进 制 形式 进行 操作 ， 但 返回 的 值 仍 是 标 


一 个 二 元 运算 符 ， 该 运算 符 可 以 将 左右 两 个 操作 数 逐 位 执行 AND 操 作 ， 即 


实例 说 明 : 


<script language="javascript"> 
“3 

Var exprl = 9; 

Var expr2 = 15; 

Var result = exprl & expr2; 
document .write (result); 

| 

</script> 


在 进行 位 与 操作 时 ， 位 与 运算 符 会 先 将 十 | 
进 制 的 操作 数 转化 为 二 进 制 ， 在 将 二 进 制 中 的 | 
每 一 位 数值 逐 位 进行 AND 操 作 ， 得 出 结果 将 转 


人 肯 4.9.2 

位 或 运算 符 用 符号 〈|) 表示 ， 位 或 操作 符 
是 对 两 个 操作 数 进行 或 操作 ， 因 此 对 于 每 一 位 ; 
来 说 ，0I0=0，0I1=1，1I0=1，1I1=1。 例 如 :| 


<script language="javascript"> 
一 

Var exprl = 9; 

Var expr2 = 15; 

Var result = exprl | expr2; 
document .write (result); 

| 


</script> 


! | 
: ( 


仆 4.9.3 ”课堂 小 实例 一 一 位 异 或 运 


“ 异 或 ”运算 符 (^) 将 第 一 操作 数 的 每 个 位 | 
与 第 二 操作 数 的 相应 位 进行 比较 。 如 果 一 个 位 ; 
是 0， 另 一 个 位 是 1， 则 相应 的 结果 位 将 设置 为 


1。 否 则 ， 将 对 应 的 结果 位 设置 为 0。 例如: 


<script language="javascript"> 
sre 

Var exprl = 9; 

Var expr2 = 15; 

Var result = exprl ^ expr2; 
document .write (result); 

= 


</script> : 


| 代码 的 结果 为 15， 如 图 
1 [BAe Wndom Mema Boo TT le | 


1 [Ken 


6 _。 第 / 章 在于 和 和 
| 化 为 十 进 制 ，9 对 应 的 二 进 制 数 是 1001，15 对 
i 应 的 二 进 制 数 是 1111 (1001&1111=1001) ， 
; 所 以 运行 代码 的 结果 为 9， 如 图 4-22 所 示 。 
0 EE DVaasoipE FRR |x | ns 


YE - Windors temat Eee 三 | 硬 


2 了 
HH 9 5V) ARAN IAT 帮 勒 (H) | 
em BE 


3 


es ER ET | 


图 4-22 位 与 运算 符 


课堂 小 实例 一 一 位 或 运算 符 


9 对 应 的 二 进 制 数 是 1001，15 对 应 的 二 进 
制 数 是 1111 (1001 | 1111 = 1111)》 ， 所 以 运行 
4-23 所 示 。 


[| 
SMF WBS SEV MAN IAT) WRI 
EL 大 天 


Em 


| 


十 计 丰 | 生 sp 本 Tt 可 抽 


图 4-23 ”位 或 运算 符 


0 


算 符 


9 对 应 的 二 进 制 数 是 1001，15 对 应 的 二 进 


制 数 是 1111 (1001 ^ 1111 = 0110) ， 所 以 运 
i 行 代码 的 结果 为 6， 如 图 4-24 所 示 。 
Wd a Ee [= 
OO [Covessa -|X| 有 Em 
4 Ral) EBV) Wak) Tem WH) | 
eB | | 


图 4-24 位 异 或 运算 符 
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JavaScript 网 页 设计 与 网 站 特效 畏 让 到 本 二 


由 4.9.4 课堂 小 实例 一 一 位 非 运算 符 
位 非 操作 符 用 一 个 波浪 线 ~) 表示， 执行 位 非 操作 的 结果 就 是 返 


(~) 是 单 模 运算 符 ， 它 和 汇编 程序 里 的 按 位 取 非 操 
成 0， 再 把 0 换 成 1，~0=1，~I=0。 例 如 : 


<script language="javascript"> 


回 


数值 的 反 码 。 位 非 运算 符 
作 的 结果 是 一 样 的 。 它 所 做 的 操作 就 是 把 1 换 


<0== 
var iNuml = 6; //6 二 进 制 数 等 于 00000110 
var iNum2 = ~iNuml; // 转 换 二 进 制 数 取 非 为 11111001 


document .write (iNum2); 
-> 
</script> 


6 的 二 进 制 数 等 于 00000110， 转 换 二 进 制 } 


OO | msripnnBrAasRe t+ [x | sng 


El 


ER 


Fr Wndom temet Lolorer 


数 取 非 为 11111001， 所 以 运行 代码 的 结果 为 | 
-7， 如 图 4-25 所 示 。 : 


ET TE 


| 六 mm BEE 


El Ll 


且 4.9.5 ”课堂 小 实例 一 一 左 移 运算 符 


左 移 操作 符 〈<<) 是 双 模 操作 符 ， 它 和 汇编 程序 号 
左 移 位 的 操作 ， 右 操作 数 给 出 了 要 移动 的 位 数 ， 在 移 位 


<script language="javascript"> 


图 4-25 位 非 运 算 符 


的 左 移 运 算是 一 样 的 。 它 是 对 左 操作 数 进行 向 
的 过 程 中 ， 左 操作 数 的 最 低位 用 0 补充 。 例 如 : 


<!-- 

var iold = 97 //9 等 于 二 进 制 1001 

var iNew = iold << 2; // 向 左 移 两 位 变 成 100100 
document .write (iNew); 

-—> 

</script> 


因为 9 对 应 的 二 进 制 数 是 1001， 向 左 移 两 | 
位 变 成 100100， 所 以 运行 代码 的 结果 为 36， 如 
图 4-26 所 示 。 | 
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[Bsa Windom memet bolorer | ee 

OO Ervinersrr -| |x | en ER 

EE EE 

> BAe 

3 
| 
| 
| 
| 

运 一 CE- 人 -sm | 


图 4-26 左 移 运算 符 


@ _。 第 4 章 中 下 到 
国 4.9.6 课堂 小 实例 一 一 带 符号 右 移 运算 符 
右 移 运算 符 (>>) 也 是 双 模 操作 符 ， 它 和 左 移 操作 符 有 点 相似 。 它 对 左 操作 数 进行 右 移 位 操 
作 ， 右 操作 数 给 出 了 要 移动 的 位 数 。 不 过 在 移 位 的 过 程 中 ， 是 丢弃 移出 的 位 ， 而 左边 用 0 填充 ( 负 
数 用 1 填充 ) 。 例 如 : 


符 


<script language="javascript"> 

sa 

var iold = 9; //9 等 于 二 进 制 1001 
var iNew = iold >> 2; // 向 左 移 两 位 变 成 10 
document .write (iNew); 

2 

</script> 


因为 9 对 应 的 二 进 制 数 是 1001， 右 移 两 位 | [Br wen me esew i 可 | 
| [© |e momma Tage @ “| [x | ns ER 


变 成 10， 所 以 运行 代码 的 结果 为 2， 如 图 4-27 | | sm J ~ 


> 突 W 。 攻 无 本本 
所 示 。 - 


! 上 项 十 计 夏 几 | 本 区 | 
- - 


图 4-27 带 符 号 右 移 运算 符 


@ 


1. 填空 题 
(1) 运算 符 是 一 种 用 来 处 理 数 据 的 符号 ， 日 常 算数 中 所 用 到 的 
都 属于 运算 符 。 

(2) 又 称 比较 运算 符 ， 它 是 反映 操作 数 之 间 关 系 的 一 类 运算 符 的 总 称 。 这 类 运算 符 通 
常 是 双 目 的 ， 并 且 返 回 的 表达 式 值 类 型 为 布尔 型 。 

(3) ~ 的 作用 是 给 一 个 变量 赋值 ， 即 将 某 个 数值 指定 给 某 个 变量 。JavaScript 的 
不 仅 可 用 于 改变 变量 的 值 ， 还 可 以 和 其 他 一 些 运算 符 联合 使 用 ， 构 成 混合 赋值 运算 符 。 
2. 问答 题 
比较 运算 符 “==” 与 赋值 运算 符 “=” 的 不 同 之 处 在 于 什么 地 方 ? 
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本 章 导 读 
JavaScript 中 的 函数 本 身 就 
是 一 个 对 象 ， 而 且 可 以 说 是 最 重 
要 的 对 象 。 之 所 以 称 之 为 最 重要 
的 对 象 ， 一 方面 它 可 以 扮演 像 其 
他 语言 中 的 函数 角色 ， 可 以 被 调 
用 ， 可 以 被 传 入 参数 。 另 一 方面 
它 还 被 作为 对 象 的 构造 器 来 使 
用 ， 可 以 结合 new 操 作 符 来 创建 
对 象 。 


技术 要 点 
@ 函数 

@ 函数 的 定义 
@ 使 用 选择 语句 
@ 使 用 循环 语句 
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实例 展示 
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Te 


NEN Sm 


禁止 筷 标 右键 效果 


用 用 


人 性 5.1.1 ”什么 是 函数 


JavaScript 中 的 函数 是 可 以 完成 某 种 特定 功 
能 的 一 系列 代码 的 集合 ， 在 函数 被 调用 前 ， 函 数 | 
体内 的 代码 并 不 执行 ， 即 独立 于 主 程序 。 编 写 主 | 
程序 时 不 需要 知道 函数 体内 的 代码 如 何 编写 ， 只 | 
可 把 程序 中 大 部 分 功能 } 
拆 解 成 一 个 个 函数 ， 使 程序 代码 结构 清晰 ， 易 于 : 


需要 使 用 函数 方法 即 可 。 


理解 和 维护 。 函 数 的 代码 执行 结果 不 一 定 是 一 


不 变 的 ， 可 以 通过 向 函数 传 参数 ， 以 解决 不 同情 | 
; 如 日 期 对 象 (Date) 、 
函数 是 进行 模块 化 程序 设计 的 基础 ， 编 : 


况 下 的 问题 ， 函 数 也 可 返回 一 个 值 。 


写 复杂 的 应 用 程序 ， 必 须 对 函数 有 更 深入 的 了 
解 。JavaScript 中 的 函数 不 同 于 其 他 的 语言 ， 
每 个 函数 都 是 作为 一 个 对 象 被 维护 和 运行 的 。 


数 赋值 给 一 ge tt 
在 继续 讲述 之 前 ， 先 看 一 下 函数 的 使 用 语法 : 


function funcl (.…) {-.} 


Var func2=function (-…) {-…}; 
Var func3=function func4 (--) {-..}; 


Var func5=new Function(); 


函数 是 JavaScript 中 最 灵活 的 一 种 对 象 ， 函 数 是 由 事件 驱动 的 或 者 当 它 
用 时 执行 的 可 重复 使 用 的 代码 块 。JavaScript 提 供 了 许多 函数 来 供 开 发 人 员 使 用 。 


这 些 都 是 声明 函数 的 正确 语法 。 

可 以 用 function 关 键 字 定 义 一 个 函数 ， 并 
为 每 个 函数 指定 一 个 函数 名 ， 通 过 函数 名 来 进 
行 调用 。 在 JavaScript 解 释 执行 时 ， 函 数 都 是 
被 维护 为 一 个 对 象 ， 这 就 是 要 介绍 的 函数 对 象 
(Function Object) 。 

函数 对 象 与 其 他 用 户 所 定义 的 对 象 有 着 本 
质 的 区 别 ， 这 一 类 对 象 被 称 之 为 内 部 对 象 ， 例 
数组 对 象 (Array) 、 字 
符 串 对 象 (String) 都 属于 内 部 对 象 。 这 些 内 部 


: 对 象 的 构造 器 是 由 JavaScript 本 身 所 定义 的 : 通 
; 过 执行 new Array() 这 样 的 语句 返回 一 个 对 象 ， 
i JavaScript 内 部 有 一 套 机 制 来 初始 化 返回 的 对 
通过 函数 对 象 的 性 质 ， 可 以 很 方便 地 将 一 个 函 : 


象 ， 而 不 是 由 用 户 来 指定 对 象 的 构造 方式 。 
函数 就 是 包 豪 在 花 括号 中 的 代码 块 ， 下 面 


| 使 用 关键 词 function: 


function functionname () 
{ 

这 里 是 要 执行 的 代码 

让 
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TT 刘 兰 实录 。。 一 仿 

当 调用 该 函数 时 ， 会 执行 函数 内 的 代码 。 

可 以 在 某 事件 发 生 时 直接 调用 函数 〈 比 如 当 用 户 单 击 按钮 时 ) ， 并 且 可 由 JavaScript 在 任何 
位 置 进行 调用 。 


JavaScript 对 大 小 写 敏 感 。 关 键 词 function 必 须 是 小 写 的 ， 并 且 必 须 使 用 与 函数 名 称 相 同 的 大 小 
写 来 调用 函数 。 


八 5.1.2 理解 函数 的 参数 传递 

昌 以 辣 生 作 下 但 。 这 些 值 <button onclick="myFunction(' 丽 丽 ',' 
被 称 为 参数 。 这 些 参 数 可 以 在 函数 中 使 用 ， 可 | 老板 ) "> 点 击 这 里 </button> 

以 发 送 任意 多 的 参数 ， 由 逗号 分 隔 。 | 


<script> 


myFunction (argument1l,argument2) 


当 声明 函数 时 ， 需 要 把 参数 作为 变量 来 声明 。 | 


function myFunction (varl, var2) 


function myFunction (name, job) 
alert(" 欢 迎 "+ name + "," + job); 


{ : </script> 
这 里 是 要 执行 的 代码 : 


: 上 面 的 函数 会 在 按钮 被 单 击 时 ， 提 示 “ 欢 


， 迎 丽 丽 ， 老 板 ”， 运 行 代码 的 效果 如 图 5-1 所 示 。 


变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 | searceecron FEEE 
个 变量 就 是 第 一 个 被 传递 的 参数 的 给 定 的 值 ， = 
以 此 类 推 。 例 如 : 
HM I, | et TET 


图 5-1 调用 带 参 数 的 函数 


用 5.1.3 ”函数 中 变量 的 作用 域 和 返回 值 
有 时 ， 我 们 会 希望 函数 将 值 返回 到 调用 它 的 地 方 。 通 过 使 用 return 语 句 就 可 以 实现 这 一 目的 。 
在 使 用 retur 语 句 时 ， 函 数 会 停止 执行 ， 并 返回 指定 的 值 。 语 法 如 下 ; 


function myFunction() 
二 

Var X=5; 

return x; 


} 


整个 JavaScript 并 不 会 停止 执行 ， 停 止 的 仅仅 是 函数 。JavaScript 将 继续 执行 代码 ， 即 从 调用 
函数 的 地 方 开始 执行 。 函 数 调用 将 被 返回 值 5 取 代 。 
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实例 代码 : : 本 例 调用 的 函数 会 执行 一 个 乘法 计算 ， 然 
<!doctype html> : 后 返回 运行 结果 6， 效 果 如 图 5-2 所 示 。 
el : Be i Eel) 


Ea 


<head> SH Wa EV WN IRT ta 
x BE 

<meta charset="utf-8"> i 

<title> 无 标题 文档 </title> s 

</head> 

<body> 


<p> 返 回 结果 : </p> 
<p id="jie"></p> 


<script> | | 匡 | TE TE 


function myFunction (a,b) : 图 5-2 带 有 返回 值 的 函数 
{ ! 

return a*b; 

} | 
document .getElementById("jie") . 


innerHTML=myFunction (2,3) 7 
</script> 
</body> 
</html> 


SD Ni 
@ 


使 用 函数 首先 要 学 会 如 何 定义 ，JavaScript 的 函数 属于 Function 对 象 ， 
因此 可 以 使 用 Function 对 象 的 构造 函数 来 创建 一 个 函数 。 同 时 也 可 以 使 用 Function 关 键 字 以 普通 的 
形式 来 定义 一 个 函数 。 下 面 就 讲述 函数 的 定义 方法 。 


作 5.2.1 函数 的 普通 定义 方式 

普通 定义 方式 是 使 用 关键 字 function， 这 也 是 最 常用 的 方式 ， 形 式 上 跟 其 他 的 编程 语言 一 样 ， 
语法 格式 如 下 。 

基本 语法 : 

Function 函数 名 (参数 1， 参 数 2，.….) 

{ [语句 组 ] 

Return [表达 式 ] 

} 


语法 解释 : 
function: 必 选 项， 定义 函数 用 的 关键 字 。 
函数 名 : 必 选 项 ， 合 法 的 JavaScript 标 识 符 。 
参数 : 可 选项 ， 合 法 的 JavaScript 标 识 符 ， 外 部 的 数据 可 以 通过 参数 传送 到 函数 内 部 。 
语句 组 : 可 选项 ，JavaScript 程 序 语句 ， 当 为 空 时 函数 没有 任何 动作 。 
return: 可 选项 ， 遇 到 此 指令 函数 执行 结束 并 返回 ， 当 省 略 该 项 时 函数 将 在 右 花 括 号 处 结束 。 
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@ 表达 式 : 可 选 页 ， 其 值 作 为 函数 返回 值 。 
实例 代码 : 
<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<script type="text/javascript"> 
function displaymessage() 

{ 

alert ("欢迎 你 ! ") ; 

} 

</script> 

</head> 

<body> 

<form> 

<input type="button" value=" 单 击 弹出 窗口 ”onClick="displaymessage()" /> 
</form> 

</body> 

</html> 


这 段 代 码 首 先 在 JavaScript 内 建立 一 个 |! TE 
displaymessage() 显 示 函 数 。 在 正文 文档 中 插入 
一 个 按钮 ， 当 单 击 按钮 时 ， 显 示 “ 欢 迎 你 ! ”。 


运行 代码 在 浏览 器 中 预览 的 效果 如 图 5-3 所 示 。 


iE 办 “| 号 [| [Gh Gy 


Nom= Ba 
Ea EL] 


站 TI 0% 


图 5$-3 ”函数 的 应 用 


| 92 并 数 的 变 量 定 义 方式 
在 JavaSoript 中 ， 函 数 对 象 对 应 的 类 型 是 Function， 正 如 数组 对 象 对 应 的 类 型 是 Array， 日 其 
对 象 对 应 的 类 型 是 Date 一 样 ， 可 以 通过 new Function() 来 创建 一 个 函数 对 象 ， 语 法 如 下 。 


Var 变量 名 =new Function ( [参数 1， 参 数 2，.… ]， 函 数 体 〉; 


语法 解释 : 
@ 变量 名 : 少 选 项 ， 代 表 函 数 名 ， 是 合法 的 JavaScript 标 识 符 。 
@ 参数 : 可 选项 ， 作 为 函数 参数 的 字符 串 ， 必 须 是 合法 的 JavaScript 标 识 符 ， 当 函数 没有 参数 时 可 以 
忽略 此 项 。 
@@ 函数 体 : 可 选项 ， 一 个 字符 串 。 相 当 于 函数 体内 的 程序 语句 系列 ， 各 语句 之 间 使 用 分 号 隔 开 。 
new Function() 的 形式 来 创建 一 个 函数 是 不 常见 的 ， 因 为 一 个 函数 体 通 常会 有 多 条 语句 ， 如 
果 将 它们 以 一 个 字符 串 的 形式 作为 参数 传递 ， 其 代码 的 可 读 性 差 。 


©@ 。0— 


实例 代码 : 


<script language="javascript"> 


第 5 章 区 EES 让 


var circularityArea = new Function( "r", "return r*r*Math.PI"” ); // 创建 一 个 
函数 对 象 

Var rCircle =3; // 给 定 圆 的 半径 

Var area = circularityArea(rCircle); // 使 用 求 圆 面积 的 函数 求 面积 

document .write ("半径 为 3 的 圆 面 积 为 : ”+ area ); // 输出 结果 

</script> 

该 代码 使 用 变量 定义 方式 来 定义 一 个 求 园 | [2 werner FE 


面积 的 函数 ， 设 定 一 个 半径 为 3 的 区 
积 。 运 行 代码 ， 在 浏览 器 中 预览 的 效果 如 图 
所 示 。 


并 求 其 面 


有 5.2.3 ”函数 的 指针 调用 方式 


在 前 面 的 代码 中 ， 函 数 的 调用 方式 是 最 常见 的 


5-4 | 


le 。 税 天 ES 
半径 为 3 的 加 而 积 为 ，28 274333882308138 
B 


3 须 计 五 和 EPE 可 用 


图 5-4 函数 的 应 用 


， 但 是 JavaScript 中 函数 调 


的 形式 比较 多 ， 非 


常 灵活 。 有 一 种 重要 的 ， 在 其 他 语言 中 也 经 常 使 用 的 调用 形式 叫 作 回 调 ， 其 机 制 是 通过 指针 来 调 
函数 。 回 调 函 数 按照 调用 者 的 约定 实现 函数 的 功能 ， 由 调用 者 调用 。 通 常 使 用 在 自己 定义 功能 
而 由 第 三 方 去 实现 的 场合 ， 下 面 举例 说 明 ， 代 码 如 下 。 


<script language="javascript"> 


function SortNumber( obj, func ) 


// 定义 通用 排序 函数 


{ // 参数 验证 、 如 果 第 一 个 参数 不 是 数组 或 第 二 个 参数 不 是 函数 则 抛 出 异 党 


if( !(obj instanceof Array) || !(func instanceof Function)) 


{ 
Var e = new Error(); 

e.number = 100000; 

e.message = "参数 无 效 "; 

throw e; 

} 

for( n in obj ) 

{ 

for( m in obj ) 

{ if( func( obj[n], obj[m] ) ) 
{ 

var tmp = obj[n]; 

obj [n] 


obj [m]; 


obj[m] = tmp; 


// 生成 错误 信息 
// 定义 错误 号 
// 错误 描述 
// 抛 出 异常 


// 开始 排序 


// 使 用 回调 函数 排序 、 规 则 由 用 户 设 定 
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， 


return obj; // 返回 排序 后 的 数组 

function greatThan( argl, arg2 ) // 回调 函数 ， 用 户 定义 的 排序 规则 

{ return argl < arg2; // 规则 : 从 大 到 小 

} 

try 

{ var numAry = new Array(4,16,17,6,22,55,99,86 ); // 生成 一 数组 

document .write ("<1i> 排 序 前 : "+numAry); // 输出 排序 前 的 数据 

SortNumber ( numAry, greatThan ) // 调用 排序 函数 

document .write ("<1i> 排 序 后 : "+numAry); // 输出 排序 后 的 数组 

上 

catch (e) 

{ alert( e.number+": "+e.message ); // 异常 处 理 

} 

</script> 

这 段 代 码 演示 了 回调 函数 的 使 用 方法 。 首 | [Sse wmmenapoer =——— 
| | OO owner @ -+ [x | sn P| 


先 定义 一 个 通用 排序 函数 SortNumber( obj, func 
)， 其 本 身 不 定义 排序 规则 ， 规 则 交 由 第 三 方 函 | pr 
数 实现 。 接 着 定义 一 个 greatThan( arg1, arg2 ) Sk 
函数 ， 其 内 创建 一 个 以 小 到 大 为 关系 的 规则 。 ; 

document.write("<li> 排 序 前 : "+numAry) 输 出 ;| 
未 排序 的 数组 。 接 着 调用 SortNumber( numAry | 
greatThan ) 本 数 排 序 ,运行 代码 ， 在 浏览 中 | 


预览 的 效果 如 图 5-5 所 示 。 | 区 Ra 
图 5-5 函数 的 指针 调用 方式 


使 用 选择 语 名 


@ 选择 语句 就 是 通过 判断 条 件 来 选择 执行 的 代码 块 。JavaScript 中 选择 语 
句 有 if 语 句 和 switch 语 句 两 种 。 


虽 5.3.1 课堂 小 实例 一 一 if 选择 语句 
lf 语句 是 只 有 当 指 定 条件 为 true 时 ， 该 语句 才 会 执行 代码 。 
基本 语法 : 
if (条 件 ) 
{ 
条 件 成 立时 执行 代码 
} 


Frm 


实例 代码 : 


本 实例 用 到 了 JavaScript 的 if 条 件 语 句 。 所 
首先 用 length 计 算出 字符 串 Good day 的 长 ; 
度 ， 然 后 使 用 if 语句 进行 判断 ， 如 果 该 字符 串 ; 
长 度 <10， 就 显示 “该 字符 串 长 度 小 于 10”， ; 
运行 代码 的 效果 如 图 5-6 所 示 。 


_ 于 芷 HL| 保护 模 区 基 用 | 


| ”图 5-6 8 地 5 择 语 各 
人 5.3.2 课堂 小 实例 一 felse 选 择 语句 一 一 一 一 一 一 一 一 一 0 
如 果 希 望 条 件 成 立时 执行 一 段 代码 ， 而 条 件 不 成 立时 执行 男 一 段 代码 ， 那 么 可 以 使 用 if…else 


语句 。if.…else 语 句 是 JavaScript 中 最 基本 的 控制 语句 ， 通 过 它 可 以 改变 语句 的 执行 顺序 。 
基本 语法 : 


这 句 语 法 的 含义 是 ， 如 果 符合 条 件 ， 则 执行 if 语 句 中 的 代码 ， 反 之 ， 则 执行 else 语 句 中 的 代码 。 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<script language="javascript"> 
var hours = 3; 

LE houres ey) 

4 


// 设 定 当前 时 间 


// 如 果 不 到 7 点 则 执行 以 下 代码 


document .write( "当前 时 间 是 "” + hours + " 点， 还 没 到 7 点 ， 你 可 以 继续 休息 ! ") ; 


</script> 
</body> 
</html> 


使 用 var hours=3 定 义 一 个 变量 hours 来 表 ! 
示 当 前 时 间 ， 其 值 设 定 为 3。 接 着 使 个 if 语 


Cl ls 


句 判 断 变量 hours 的 值 是 否 小 于 7， 小 于 7 则 执 
行 if 块 花 括号 中 的 语句 ， 即 弹出 一 个 提示 框 显 
示 “ 当 前 时 间 3 点 ， 还 没 到 7 点 ， 你 可 以 继续 休 
息 ”。 运 行 代码 的 效果 如 图 5-7 所 示 。 


当前 时 间 是 3 点 ， 还 没 到 ? 点， 你 可 以 继 结 休息 


Te 


图 5-7 felse 选 择 语句 


上 5.3.3 “课堂 小 实例 一 一 if .else. if. .选择 语句 


当 需 要 选择 多 套 代 码 中 的 一 套 来 运行 时 ， 可 以 使 
基本 语法 : 

if (条 件 1) 

下 

当 条 件 1 为 true 时 执行 的 代码 

上 

else if (条 件 2) 

{ 

当 条 件 2 为 true 时 执行 的 代码 

. 

else 

{ 

当 条 件 1 和 条 件 2 都 不 为 true 时 执行 的 代码 
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if.…else…if.… 语 句 。 


@ _。 第 5 章 ,avaScript 程 矿 核 心 语法 


实例 代码 : 

<!doctype html> : document .write ("<b> 下 午 好 !</b>") ; 
<html> : } 

<head> : </script> 

<meta charset="utf-8"> : </body> 

<title> 无 标题 文档 </title> | </html> 

</head> | RE ER 
如 果 时 间 小 于 10 点 ， 则 将 发 送 问候 “早上 


| 好 ”， 如 果 时 间 小 于 16 点 且 大 于 10 点 ， 则 发 送 
人 | 问候“ 中午 好 ”， 否 则 发 送 问候 “下 午 好 ”， 
var time = d.getHours(); | 运行 代码 的 效果 如 图 5-8 所 示 。 


<script type="text/javascript"> 


rheines ro) SE 


{ : :二 可 
document .write ("<b> 早 上 好 ! </b>") 7 | - 
else if (time>10 && time<16) 

{ 

document .write ("<b> 中 午 好 </b>") ; 

} 

else 


几 寺 笠 包 | 保罗 棋 式 车 


{ : 图 5-8 If..else if..else 选 择 语句 


且 5.3.4 ”课堂 小 实例 一 switch 多 条 件 选择 语句 

如 果 希 望 选 择 执行 若干 代码 块 中 的 一 个 ， 你 可 以 使 用 switch 语句 。 使 用 switch 语 句 时 ， 表 达 
式 的 值 将 与 每 个 case 语 句 中 的 常量 做 比较 。 如 果 相 匹配 ， 则 执行 该 case 语 句 后 的 代码 ; 如 果 没 有 
一 个 case 的 常量 与 表达 式 的 值 相 匹 配 ， 则 执行 default 语 句 。 当 然 ，default 语 句 是 可 选 的 。 如 果 没 
有 相 匹配 的 Case 语句 ， 也 没有 default 语 句 ， 则 什么 也 不 执行 。 

基本 语法 : 

Switch (n) 

于 

case ls 

执行 代码 块 1 


break 


cade 2 

执行 代码 块 2 

break 

default: 

如 果 n 既 不 是 1 也 不 是 2， 则 执行 此 代码 
} 


语法 解释 : 
switch 后 面 的 (n) 可 以 是 表达 式 ， 也 可 以 (并 通常 是 变量 。 然 后 表达 式 中 的 值 会 与 ase 中 的 
数字 做 比较 ， 如 果 与 某 个 case 相 匹配 ， 那 么 其 后 的 代码 就 会 被 执行 。 


JavaScript 网 页 设计 与 网 站 特效 国语 芭 相 直 人 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<body> 

<script type="text/javascript"> 
Var d = new Date() 
theDay=d.getDay () 

Switch (theDay) 

case 5: 

document .write ("<b> 今 天 星期 五 了 。</b>") 
break 

CASe 和 5 

document .write ("<b> 星 期 天 啦 ! </b>") 
break 

default: 

document .write ("<b> 周 末 又 过 完了 啊 ! </b>") 
</script> 

</body> 

</html> 


本 实例 使 用 了 switch 条 件 语句 ， 根 据 星期 | 


天 数 的 不 同 ， 显 示 不 同 的 输出 文字 。 运 行 代码 A 
的 效果 如 图 5-9 所 示 。 RT 


EE 


WH) 


EEL] ET 


图 5-9 switch 多 条 件 选 择 语句 


使 用 循环 语句 


@ 在 不 少 实际 问题 中 有 许多 具有 规律 性 的 重复 操作 ， 因 此 在 程序 中 就 需要 


复 执 行 某 些 语句 。 一 组 被 重复 执行 的 语句 称 之 为 循环 体 ， 能 否 继续 下 


条 件 。 循 环 语句 是 由 循环 体 及 循环 的 终止 条 件 两 部 分 组 成 的 。 


重复 执行 ， 决 定 循环 的 终止 


@ 。" 第 5 章 四 ERES3UTI5S 克 页 史 本 玉 


课堂 小 实例 一 for 循环 语句 
遇 到 重复 执行 指定 次 数 的 代码 时 ， 使 用 for 


骨 5.4.1 


循环 比较 合适 。 在 执行 for 循 环 体 中 的 语句 前 ， 


有 3 个 语句 将 得 到 执行 ， 这 3 个 语句 的 运行 结果 | 


将 决定 是 否 要 进入 for 循 环 体 。 
基本 语法 : 


for〈 初 始 化 ; 条 件 表达 式 ; 增 量 ) 
ff 


语句 集 ; 

} 

语法 说 明 : | 

初始 化 总 是 一 个 赋值 语句 ， 它 用 来 给 循环 | 
控制 变量 赋 初 值 ， 条 件 表 达 式 是 一 个 关系 表达 ! 
式 ， 它 决定 什么 时 候 退 出 循环 ， 增 量 定义 循环 | 
控制 变量 每 循环 一 次 后 按 什么 方式 变化 。 这 3 个 | 
部 分 之 间 用 “;” 分 开 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 


<p> 点 击 显示 循环 次 数 : </p> 


<button onclick="myFunction()"> 点 击 : 


</button> 
<p id="demo"></p> 
<script> 


5.4.2 


的 是 一 
基本 语法 : 
while (条 件 表达 式 ) { 
语句 组 ; 


function myFunction() 


{ 
ee 
for (var i=0;i<5;i++) 
下 
x=x + "循环 次 数 " + i + "<br>"; 
3 
document .getElementById ("demo"). 


: innerHTML=x; 


| 
</script> 
</body> 
</html> 


在 循环 开始 之 前 设置 变量 (var i=0) ， 接 
; 着 定义 循环 运行 的 条 件 〈i 必 须 小 于 5) ， 在 每 
i 次 代码 块 已 被 执行 后 增加 一 个 值 i++)， 运 行 代 
| 码 的 效果 如 图 5-10 所 示 。 


[Bi Wrdom imet cer | 三 大 而 
全 sweepRRGsFasge 国 -| 9 x | om = 


上 CE 区 


图 5-10 for 循环 语句 


PE 


for 循 环 的 写法 非常 灵活 ， 圆 括号 中 的 语 身 


可 以 用 来 写 出 技巧 性 很 强 的 代码 ， 读 者 可 以 


自行 实验 。 


课堂 小 实例 一 while 循环 语句 
while 结 构 循环 为 当 型 循环 (when type loop) ， 一 般 用 于 不 知道 循环 次 数 的 情况 。 
个 条 件 表达 式 ， 当 条 件 成 立时 则 执行 循环 体 ， 当 条 件 不 成 立时 则 退出 循环 。 


维持 循环 
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语法 解释 : | 使 用 num 是 否 小 于 50 的 条 件 来 决定 是 否 进 

@ 条 件 表达 式 : 少 选项 ， 以 其 返回 值 作为 进入 特 ; 入 循环 体 ，num++ 递 增 num， 当 其 值 达到 50 后 

环 体 的 条 件 。 无 论 返 回 什么 样 类 型 的 值 ， 都 被 ; 循环 将 结束 ， 运 行 的 结果 如 图 5-11 所 示 。 

作为 布尔 型 处 理 ， 为 真 时 进入 循环 体 。 ee = 
@ 语句 组 可 选项 ， 由 一 条 或 多 条 语句 组 成 。 Er < 
在 while 循 环 体重 复 操作 while 的 条 件 表 
使 循环 到 该 语句 时 就 结束 。 
实例 代码 : 


<script language="javascript"> 


RT | | ng D7| 


达 


var num = 1; 


while( num < 50 ) 8 
{document .write( num + "" ); 责 计 有 SR 有 而 00W 
num++;} 图 5-11 使 用 While 语句 
</script> 


用 5.4.3 ”课堂 小 实例 一 do-while 循 环 语句 
do…while 语 句 结构 为 直到 型 循环 (until type loop) ， 也 用 于 不 知道 循环 次 数 的 情况 。do… 
while 和 while 的 区 别 在 于 do…while 结 构 是 执行 完 一 遍 循 环 体 再 判断 条 件 。 
基本 语法 : 


do 


{ 语句 组 } 
while (条 件 ) ; 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<body> 

<p> 只 要 i 小 于 10 就 一 直 循环 代码 块 。</p> 
<button onclick="myFunction()"> 点 击 我 循环 </button> 
<p id="demo"></p> 

<script> 

function myEunction() 


{var x="",i=0; 

do 

{X=X 二 "循环 次 数 ”十 工 + "<br>n7i++7 

while (i<10) 

document .getElementById ("demo") .innerHTML=x; 


} 


80 


使 用 do 一 while 循 环 ， 该 循环 至 少 会 被 执行 | 
一 次 ， 即 使 条 件 是 false， 隐 藏 代码 块 会 在 条 件 ; 
被 测试 前 执行 ， 只 要 i 小 于 10 就 一 直 循环 执行 代 ; | 


码 块 ， 运 行 代码 的 效果 如 图 5-12 所 示 。 


EEC 了 FL[ 工 二 万 


en 


只 要 i 小 于 10 就 一 直 箱 环 代码 块 。 


Bb 


| 和 00% | 


图 5-12 do-while 循 环 语句 


国 5.4.4 课堂 小 实例 一 -break 和 continue 跳 转 语句 一 一 一 一 一 0 
continue 与 break 的 区 别 是 : break 是 彻底 结束 循环 ， 而 continue 是 结束 本 次 循环 。 


1. break 语句 


break 语 句 可 用 于 跳出 循环 ，break 语 句 跳出 循环 后 ， 会 继续 执行 该 循环 之 后 的 代码 。 


实例 代码 : 


JavaScript 网 页 设计 与 网 站 特 


当 i==3 时 ， 使 用 break 语 句 停止 循环 ， 运 行 代码 的 效果 如 图 5-13 所 示 。 
B FFE - Windows Intemet Explorer 


QO i sxe B -x es me 


| 


En | SP 0 


图 5-13 ”break 语 句 


2. continue 跳 转 语句 


continue 语 句 的 作用 为 结束 本 次 循环 ， 接 着 进行 下 一 次 是 否 执行 循环 的 判断 。continue 语 句 只 


能 用 在 While 语句 、do/while 语 句 、for 语 句 、 或 者 for-in 语 句 的 循环 体内 ， 在 其 他 地 方 使 用 都 会 引起 
错误 。 


实例 代码 : 


本 实例 跳 过 了 值 5， 运 行 代码 的 效果 如 图 5-14 所 示 。 
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BRE Wrdorirena Ecoer es) 
OO |e mvsrommesrassr B “| 4x | ss ER 
ET EECTEZTEEOREZT 

= Beaxe 


有 点击 过 乌 来 扩 行 征 环 ,该 省 于 全 下 中 =5。 


3 ETE PEERT TE 


图 5-14 continue 跳 转 语句 


@ 在 一 些 网 页 上 ， 当 用 户 单 击 鼠 标 右键 时 会 弹出 警告 窗口 或 者 直接 没有 任 
何 反 应 。 禁 止 鼠 标 右 击 的 具体 操作 步骤 如 下 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 5-15 所 示 。 
(2) 打开 拆 分 视图 ， 在 <head> 和 </head > 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 5-16 所 示 。 


<script language=javascript> 
function click() { 

if (event.button==2) { 

alert (' 禁 止 右键 ! ') }} 

function CtrlKeyDown(){ 

if (event.ctrlKey) { 

alert (' 禁 止 使 用 右键 拷贝 ! ') }} 
document .onkeydown=CtrlKeyDown; 
document .onmousedown=click; 


</script> 


图 5-15 打开 网 页 文档 图 5-16 输入 代码 
(3) 保存 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 5-17 所 示 。 
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图 5-17 禁止 筷 标 右键 效果 


与 O 课 后 练习 0 
@ 


1. 填空 题 

(1) JavaScript 中 提供 了 多 种 用 于 程序 流程 控制 的 语句 ， 这 些 语句 可 以 分 为 “和 
一 两 大 类 。 

(2) 有 了 时， 我 们 会 希望 函数 将 值 返回 调用 它 的 地 方 。 通 过 使 用 
一 时， 函数 会 停止 执行 ， 并 返回 指定 的 值 。 

(3) 选择 语句 就 是 通过 判断 条 件 来 选择 执行 的 代码 块 。JavaScript 中 的 选择 语句 有 
一 、_” 两 种 。 


2， 操 作 题 
利用 当 你 打开 的 页 面 ， 根 据 当前 的 时 间 使 页 面 上 出 现 相应 的 问候 语 “ 上 午 好 ”， 如 图 5-18 所 示 。 


就 可 以 实现 。 在 使 用 


人 
这 建 二 将 于 今年 二 月 六 装 革 写 ， 年 太 蕴 检 究 过 不 续 村人 员 。 小 区 到 于 


元 ,时 要 而 此 再 务 ,在 力 -和 宇 六 二 后 当 所 标志 性 汗 ， 忆 要 从 检 加 - 
[| 
| 
应 ; 卫 本 = 一 兴安 计 位 全 的 EE- 

小 了 呈 、 闻 人 时， 古 要 跑车 休 施工 和 和 有 二， 时 隐 拓 


图 5-18 ”问候 语句 “上 午 好 ” 
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第 6 章 
JavaScript 核 心 对 象 


本 章 导读 

JavaScript 的 核心 对 象 是 按照 
ECMAScript 标 准 定义 的 一 些 对 象 与 
函数 ， 在 JavaScript 语 言 中 可 以 直接 
使 用 。 对 象 就 是 一 种 数据 结构 ， 包 含 
了 各 种 命名 好 的 数据 属性 ， 而 且 还 可 
以 包含 对 这 些 数据 进行 操作 的 方法 函 
数 ， 一 个 对 象 将 数据 与 方法 组 织 到 一 
个 灵巧 的 对 象 包 中 ， 这 样 就 大 大 增强 
了 代码 的 模块 性 和 重用 性 ， 从 而 使 程 
序 设计 更 加 容易 ， 更 加 轻松 。 


技术 要 点 

@ 面向 对 象 编程 的 简单 概念 
@ 对 象 应 用 

@ JavaScript 的 对 象 层次 


有人 全 的 人 9 


JavaScript 网 页 设计 与 网 站 特效 国语 芭 想起 
实例 展示 


TIE 


A 


Ni RE “ 占 生 ， 一 HKX。 大 宇 


nx 


显示 当前 时 间 效 果 


6 ] 面向 对 象 编程 的 简单 概念 


面向 对 象 (Object Oriented，OO) 是 软件 开发 的 方法 。 面 向 对 象 的 概 
念 和 应 用 已 超越 了 程序 设计 和 软件 开发 的 范围 ， 已 经 扩展 到 如 数据 库 系统 、 交 互 式 界面 、 应 用 结 
构 、 应 用 平台 、 分 布 式 系统 、 网 络 管理 结构 、CAD 技 术 、 人 工 智能 等 领域 。 


虽 6.1.1 什么 是 面向 对 象 

JavaScript 是 一 种 面向 对 象 的 动态 脚本 语言 ， 是 一 种 基于 对 象 和 事件 驱动 并 具有 安全 性 能 的 脚 
本 语言 。 它 具有 面向 对 象 语言 所 特有 的 各 种 特性 ， 比 如 封装 、 继 承 及 多 态 等 。 但 对 于 大 多 数 人 来 
说 ， 我 们 只 把 JavaScript 作 为 一 个 函数 式 语言 ， 只 把 它 用 于 一 些 简单 的 前 端 数据 输入 验证 以 及 实现 
一 些 简单 的 页 面 动 态 效果 等 ， 没 能 完全 把 握 动态 语言 的 各 种 特性 。 

在 很 多 优秀 的 Ajax 框架 中 ， 如 JQuery 等 ， 大 量 使 用 了 JavaScript 的 面向 对 象 特性 ， 要 使 用 好 
ext 技 术 ，JavaScript 的 高 级 特性 ， 面 向 对 象 语言 特性 必须 完全 把 握 的 。 

JavaScript 核 心 对 象 包括 Array、Boolean 、Date、Function、Math、Number、Object 和 
String。 这 些 对 象 同时 适用 于 客户 端 和 服务 器 端的 JavaScript。 

核心 对 象 如 表 6-1 所 示 。 


表 6-1 核心 对 象 

对 象 描 述 
Array 表述 数组 
Boolean 表述 布尔 值 
Date 表述 日 期 
Function 指定 了 一 个 可 编译 为 函数 的 字符 串 JavaScript 代 码 
Math 提供 了 基本 的 数学 常量 和 函数 ， 如 其 PI 属 性 包含 了 r 的 值 
Number 表述 实数 数值 
Object 包含 了 由 所 有 JavaScript 对 象 共享 的 基本 功能 
RegExp 表述 了 一 个 正则 表达 式 ; 同时 包含 了 由 所 有 正则 表达 式 对 象 的 共享 的 静态 属性 
String 表述 了 一 个 JavaScript 字 符 串 
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用 6.1.2 ”如 何 创建 对 象 
JavaScript 中 的 几乎 所 有 事务 都 是 对 象 : 
字符 串 、 数 字 、 数 组 、 日 期、 函数 等 。 
基本 语法 : 


Var object=new objectname(); 


@ Var 是 声明 对 象 变量 。 

@ object 是 对 象 的 名 称 。 

@ new 是 JavaScript 关 键 词 。 

@@ objectname 是 构造 函数 的 名 称 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<script> 

person=new Object(); 
person .name=" 轩 轩 "; 


person.age=2; 


document .write (person.name + "已 经 " : 


+ person.age + " 岁 了 。") 
</script> 
</body> 
</html> 


本 例 创建 名 为 “person ”的 对 象 ， 并 为 ;| 
其 添加 了 person.name=“ 轩 轩 ” 和 person. : 
age=2 属 性 ， 预 览 代 码 的 效果 如 图 6-1 所 示 。 


@_。。 第 6 章 
| 上 6.1.3 ”对象 的 属性 


| 颜色 、 前 景 颜色 等 特性 ， 


|】 干 变量 ， 称 为 属性 。 


| 干 函数 ， 称 为 方法 。 


| XH WD) ESV) aA 工具 1) 各 二 HH 1 
识 由 | 荐 天 本文 

困 轩 已 经 2 岁 了 。 

可 了 计生 克 | 全 ? 翌 区 基 用 EEC | 


JavaScript 核 心 对 象 


JavaScript 中 的 对 象 是 由 属性 和 方法 两 个 


| 基本 的 元 素 构成 的 。 


一 个 网 页 可 以 被 看 作 一 个 对 象 ， 包 含 背景 
同时 包含 打开 、 关 闭 


对 象 包含 以 下 两 个 要 素 。 
来 描述 对 象 特 性 的 一 组 数据 ， 也 就 是 若 


来 操作 对 象 特性 的 若干 动作 ， 也 就 是 若 


属性 是 与 对 象 相关 的 值 ， 可 以 采用 这 样 的 方法 


| 来 访问 对 象 的 属性 ， 对 象 名 称 .属性 名 称 ， 例 如 ， 


mycomputer .year=2014, 


mycomputer .owner ="me"。 


实例 代码 : 


<script> 

Var message="good"; 
Var x=message.length; 
document .write (x); 


</script> 


本 例 使 | 


String 对 象 的 length 属 性 来 查找 字 


| 符 串 的 长 度 ， 运 行 代码 的 效果 如 图 6-2 所 示 。 


! oe : ss 
;| sn We) EE ta) IAM Wa 

|| 守 we= 年 

本 
! | 滞 峙 + | 全 并 二 三 -或 1o0g vv 


图 6-2 查找 字符 串 长 度 


.6.1.4 ”对 象 的 方法 


方法 是 能 够 在 对 象 上 执行 的 动作 ， 可 以 通 


图 6-1 创建 对 象 


; 过 下 面 的 语法 调用 方法 。 


objectName .methodName () 
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实例 代码 : 


<script> 


Var message="good"; 
Var x=message.toUpperCase(); 
document .write (x); 


</script> 


本 实例 使 用 String 对 象 的 toUpperCase() 方 
法 来 把 文本 转换 为 大 写 ， 运 行 代码 的 效果 如 图 | 


6-3 所 示 。 | | 医 CEE 2 而 -| 有 log 


图 6-3 文本 转换 为 大 写 


6 » 对 象 应 用 o 


每 个 对 象 有 它 自 己 的 属性 、 方 法 和 事件 。 对 象 的 属性 是 反映 该 对 象 某 
些 特定 性 质 的 ， 例 如 字符 串 的 长 度 、 图 像 的 长 帘 、 文 字 框 里 的 文字 等 ， 对 象 的 方法 能 对 该 对 象 做 
一 些 事情 ， 例 如 表单 的 “提交 ” (Submit) ， 窗 口 的 “滚动 ”(Scrolling) 等 ， 而 对 象 的 事件 
能 响应 发 生 在 对 象 上 的 事情 ， 例 如 提交 表单 产生 表单 的 “提交 事件 ”， 单 击 链接 产生 的 “点 击 事 
件 ”。 不 是 所 有 的 对 象 都 有 以 上 3 个 性 质 ， 有 些 没 有 事件 ， 有 些 只 有 属性 。 


全 6.2.1 课堂 小 实例 一 一 声明 和 实例 化 
在 定义 类 时 ， 只 是 通知 编译 器 需要 准备 多 | ”实例 化 的 过 程 就 是 为 对 象 分 配 内 存 空间 的 
大 的 内 存 空间 ， 并 没有 为 它 分 配 内 存 空间 。 只 有 | 过 程 ， 此 时 ， 对 象 才 成 为 类 的 实例 。new 所 执 
在 用 类 创建 了 对 象 后 ， 才 会 真正 占用 内 存 空间 。 | 行 的 具体 操作 是 调用 相应 类 中 的 构造 方法 〈 包 
1 声明 对 象 | 括 祖先 类 的 构造 方法 ) ， 来 完成 内 存 分 配 以 及 
对 象 的 声明 和 基本 类 型 的 数据 声明 在 形式 ;变量 的 初始 化 工作 ， 然 后 将 分 配 的 内 存 地 址 返 
上 是 一 样 的 。 对 象 名 也 是 用 户 标识 符 ， 和 基本 | 回 给 所 定义 的 变量 。 
类 型 的 变量 遵循 同样 的 命名 规则 和 使 用 规则 。 ”; 例如 要 创建 一 个 student (学 生 ) 对 象 ， 
声明 一 个 变量 ， 并 不 会 分 配 一 个 完整 的 对 | 每 个 对 象 又 有 这 些 属 性 : name (姓名 ) 、 
象 所 需要 的 内 存 空间 ， 只 是 将 对 象 名 所 代表 的 | address (地 址 ) 、phone (电话 ) ， 则 在 
变量 看 成 是 一 个 引用 变量 ， 并 为 它 分 配 所 需 内 ; JavaScript 中 可 使 用 自 定义 对 象 。 下 面 分 步 进 
存 空间 ， 它 所 占用 的 空间 远 远 小 于 一 个 类 的 对 | 行 讲解 。 


象 所 需要 的 空间 。 | (1) 首先 定义 一 个 函数 来 构造 新 的 对 象 

2。. 实例 化 对 象 i student， 这 个 函数 成 为 对 象 的 构造 函数 。 

用 new 关 键 字 创建 一 个 新 对 象 ， 即 进行 实例 化 。 

function student (name,address,phone) // 定 义 构造 函数 

4 
this.name=name; // 初 始 化 姓名 属性 
this.address=address; // 初 始 化 地 址 属性 
this.phone=phone; // 初 始 化 电话 属性 


@ _。 第 章 四 ERES3ITICITN 可 
(2) 在 student 对 象 中 定义 一 个 printstudent 方 法 ， 用 于 输出 学 生 信息 。 


Function printstudent () // 创 建 printstudent 函 数 的 定义 
linel="name:"+this.name+"<br>\n"; // 读 取 name 信 息 
line2="address:"+this.address+"<br>\n"; // 读 取 address 信 息 
line3="phone:"+this.phone+"<br>\n" // 读 取 phone 信 息 
document .writeln (linel,line2,1ine3); // 输 出 学 生 信息 


(3) 修改 student 对 象 ， 在 student 对 象 中 添加 printstudent 函 数 的 引用 


function student (name,address,phone) // 构 造 函数 

{ 
this.name=name; // 初 始 化 姓名 属性 
this.address=address; // 初 始 化 地 址 属性 
this.phone=phone; // 初 始 化 电话 属性 
this.printstudent=printstudent; // 创 建 printstudent 函 数 的 定义 


(4) 即 实例 化 一 个 student 对 象 并 使 用 。 
tom=new student (" 轩 轩 "," 新 华 路 156 号 ","010-1234567"; ”// 创建 轩 轩 的 信息 


tom.printstudent () // 输出 学 生 信息 

上 面 分 步 讲解 是 为 了 更 好 地 说 明 一 个 对 象 的 创建 过 程 ， 但 真正 的 应 用 开发 则 要 一 气 呵 成 ， 灵 
活 设计 。 

实例 代码 : 


<script language="javascript"> 

function student (name,address,phone) 

{ 

this.name=name; // 初始 化 学 生 信息 
this.address=address; 

this.phone=phone; 

this.printstudent=function () // 创建 printstudent 函 数 的 定义 
{ 

linel="Name:"+this.name+"<br>\n"; // 输出 学 生 信息 
line2="Address:"+this.address+"<br>\n"; 
line3="Phone:"+this.phone+"<br>\n" 

document .writeln (linel,line?2,1ine3); 

} 

下 

tom=new student (" 轩 轩 "," 新 华 路 156 号 ","010-1234567"; // 创 建 轩 轩 的 信息 
tom.printstudent () // 输出 学 生 信息 
</script> 
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课堂 实 录 “e 一 人 
该 代码 是 声明 和 实例 化 一 个 对 象 的 过 程 。 | 
首先 使 用 function student() 定 义 了 一 个 对 象 类 : 
构造 函数 student， 包 含 3 种 信息 ， 即 3 个 属性 姓 [as 
名 、 地 址 和 电话 。 最 后 两 行 创建 一 个 学 生 对 象 ;| 
并 输出 其 中 的 信息 。This 关 键 字 表示 当前 对 象 | 
即 由 函数 创建 的 那个 对 象 。 运 行 代码 在 浏览 器 | 
中 预览 ， 效 果 如 图 6-4 所 示 。 | 8 


! 攻 CE ERT 


图 6-4 实例 效果 


轩 6.2.2 ”课堂 小 实例 一 一 对 象 的 引用 

JavaScript 为 我 们 提供 了 一 些 非常 有 用 的 常用 内 部 对 象 和 方法 。 用 户 不 需要 用 脚本 来 实现 这 些 
功能 。 这 正 是 基于 对 象 编程 的 真正 目的 。 
对 象 的 引用 其 实 就 是 对 象 的 地 址 ， 通 过 这 个 地 址 可 以 找到 对 象 的 所 在 。 对 象 的 来 源 有 如 下 几 
种 方式 。 通 过 取得 它 的 引用 即 可 对 它 进行 操作 ， 例 如 调用 对 象 的 方法 或 读 取 或 设置 对 象 的 属 
性 等 。 
@ 引用 JavaScript 内 部 对 象 。 
@ 由 浏览 器 环境 中 提供 。 
@ 创建 新 对 象 。 

这 就 是 说 一 个 对 象 在 被 引用 之 前 ， 这 个 对 象 必须 存在 ， 否 则 引用 将 毫 无 意义 ， 而 出 现 错误 信 
息 。 从 上 面 我 们 可 以 看 出 ，JavaScript 引 用 对 象 可 通过 3 种 方式 获取 。 要 么 创建 新 的 对 象 ， 要 么 利 


用 现存 的 对 象 。 
实例 代码 : 
<script language="javascript"> 
var date; // 声 明 变量 
date=new date(); // 创 建 日 期 对 象 
date=date.toLocalestring( ); // 将 日 期 转换 为 本 地 格式 
alert( date ); // 输 出 日 期 
</script> 
这 里 的 变量 date 引 用 了 一 个 日 期 对 象 , 使 | 
用 date=date .toLocaleString( ) 通 过 date 变 量 调 | XM WR EE CR TR 
用 日 期 对 象 的 tolocalestring 方 法 将 日 期 信息 以 | ee 
一 个 字符 串 对 象 的 引用 返回 ， 此 时 date 的 引用 | 
已 经 发 生 了 改变 ， 指 向 一 个 string 对 象 。 运 行 代 
码 在 浏览 器 中 预览 ， 效 果 如 图 6-5 所 示 。 
SR 日 
! 匡 CEE 而 -100 


图 6-5 对 象 的 引用 


@ _。 第 章 四 ERES3ITICGITN 可 
上 6.2.3 对象 的 废除 


把 对 象 的 所 有 引用 都 设置 为 null， 可 以 强 | 当 变 量 Object 设 置 为 null 后 ， 对 第 一 个 创建 
制 性 地 废除 对 象 。 例 如 : : 的 对 象 的 引用 就 不 存在 了 。 这 意味 着 在 下 次 运行 
人 | 无 用 存储 单 元 收集 程序 时 ， 该 对 象 将 被 销 肛 。 
// 程序 逻辑 : 每 用 完 一 个 对 象 后 ， 就 将 其 废除 ， 来 释放 内 
Object=null; : 存 ， 这 是 个 好 习惯 。 这 样 还 确保 不 再 使 已 经 不 


i 能 访问 的 对 象 ， 从 而 防止 程序 设计 错误 的 出 现 。 


人 肯 6.2.4 课堂 小 实例 一 一 对 和 象 的 早 绑 定 和 晚 绑 定 

所 谓 绑 定 ， 即 把 对 象 的 接口 与 对 象 实例 结合 在 一 起 的 方法 。 

早 绑 定 是 指 在 实例 化 对 象 之 前 定义 它 的 特性 和 方法 ， 这 样 编译 器 或 解释 程序 能 提前 转换 及 其 
代码 。JavaScript 不 是 强 类 型 语言 ， 不 支持 早 绑 定 。 

晚 绑 定 〈late binding) 指 的 是 编译 器 或 解释 程序 在 运行 之 前 不 知道 对 象 的 类 型 。 使 用 晚 绑 
定 ， 无 须 检查 对 象 的 类 型 ， 只 需要 检查 对 象 是 否 支持 特性 和 方法 即 可 。JavaScript 所 有 变量 都 是 使 
晚 绑 定 方法 。 

在 函数 的 作用 域 中 ， 所 有 变量 都 是 “ 晚 绑 定 ” 的 ， 即 声明 是 项 级 的 。 例 如 : 


<script language="javascript"> 


var a = 'global'7 
(function () { 
Var a; 

alert (a); 

a = '1ocal'7 
Ws 

</script> 


在 alert(a) 之 前 只 对 a 作 了 声明 而 没有 由 | | 本 区 科 和 生生 ES 
值 ， 所 以 运行 代码 的 效果 如 图 6-6 所 示 。 eR 了 


| 六 | 癌症 


TET SR 信 而 员 1o0g 


图 6-6 ”对象 的 绑 定 


JavaScript 的 对 象 层次 © 


@ JavaScript 是 一 种 面向 对 象 的 语言 ， 在 JavaScript 中 的 对 象 都 是 有 层次 
的 。 在 本 节 里 将 讲述 JavaScript 的 对 象 层次 。 
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有 6.3.1 客户 端 对 象 层次 介绍 


文档 对 象 是 指 在 网 页 文档 里 划分 出 来 的 对 象 。 在 JavaScript 能 够 涉及 的 范围 内 有 如 下 对 象 : 
window、document、location、navigator、screen、history 等 。 

JavaScript 中 的 对 象 很 多 ， 这 些 对 象 并 不 是 独立 存在 的 ， 而 是 有 着 层次 结构 的 。 对 象 可 以 依照 
层次 来 进行 调用 。 下 面 是 一 个 文档 对 象 树 ， 如 图 6-7 所 示 。 


® navigator 浏览 器 对 象 
screen 屏幕 对 象 
® window 窗口 对 象 
© history 历史 对 象 
© location 地 址 对 象 
frames[], Frame 框架 对 象 
9 document 文档 对 象 
。 anchors[] links[]; Link 连接 对 象 
applets[] Java 小 程序 对 象 
a embeds[] 插件 
» forms[];, Fomm 表单 对 象 
» Button 按钮 对 象 
® Checkbox 复 选 框 对 象 
» elements[], Element 表单 元 素 对 象 
。 Hdden 藏 对 象 
。 Password 密码 输入 区 对 象 
。 Radio 单 选 域 对 象 
Reset 重 置 按钮 对 象 
Select 选择 区 (下拉 菜单 、 列 表 ) 对 象 
® options[], Option 选择 项 对 象 
Submit 提交 按钮 对 象 
。 Text 文本 框 对 象 
® Textarea 多 行文 本 输入 区 对 象 
images[], Image 图 片 对 象 
图 6-7 对 象 的 层次 


人 肯 6.3.2 ”浏览 器 对 象 模型 


浏览 器 对 象 模型 (Browser Object Model) 尚 无 正式 标准 。 由 于 现代 浏览 器 已 经 实现 了 
JavaScript 交 互 性 方面 的 相同 方法 和 属性 ， 因 此 常 被 认为 是 BOM 的 方法 和 属性 。 


1. Window 对 象 


所 有 浏览 器 都 支持 Window 对 象 。 它 表示 浏览 器 窗口 。 所 有 JavaScript 全 局 对 象 、 函 数 以 及 变 


量 均 自 动 成 为 Window 对 象 的 成 员 。 


甚至 HTML DOM 的 document 也 是 window 对 象 的 属性 之 一 : 


window.document .getelementbyId ("header"); 


与 此 相同 : 


document .getelementbyId ("header") ;Window 尺寸 


2. Window 尺 寸 


有 3 种 方法 能 够 确定 浏览 器 窗口 的 尺寸 〈 浏 览 器 的 视 口 ， 不 包括 工具 栏 和 滚动 条 ) 。 
对 于 Internet Explorer、Chrome、Firefox、Opera 以 及 Safari: 


@ window.innerHeight 一 浏览 器 窗 


对 于 Internet Explorer 8、7、6、5: 


® document.documentElement. clientHeight 
® document.documentElement.clientWidth 


或 者 
®@ document.body .clientHeight 


的 内 部 高 度 
@@ window .innerWidth 一 浏览 器 窗口 的 内 部 宽度 


@ _。 第 章 EMS 

®@ document.body .clientWidth 

3. 其 他 Window 方 法 

一 些 其 他 方法 : 
window .open() 一 打开 新 窗口 
window.close() 一 关闭 当前 窗口 
window.moveTo() 一 移动 当前 窗 
window.resizeTo() 一 调整 当前 窗口 的 尺寸 


pn Lt 
综合 实战 一 一 显示 当前 时 间 
@ 在 很 多 的 网 页 上 都 显示 当前 的 时 间 ， 下 面 利 用 getHours()、 


getMinutes()、getSeconds() 分 别 获得 当前 小 时 数 、 当 前 分 钟 数 、 当 前 秒 数 ， 然 后 给 时 间 变 量 timer 
赋值 ， 最 后 在 文本 框 中 显示 当前 时 间 ， 具 体操 作 步 骤 如 下 。 

(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 6-8 所 示 。 

(2) 打开 代码 视图 ， 在 <head> 和 </head> 之 间 相应 的 位 置 输 入 以 下 代码 ， 如 图 6-9 所 示 。 


<script language="javascript"> 
function showtime () // 定 义 函 数 
{var now time = new Date(); // 创 建 时 间 对 象 的 实例 
var hours = now time.getHours (); // 获 得 当前 小 时 数 
var minutes =now time.getMinutes (); // 获 得 当前 分 钟 数 
var seconds = now time.getSeconds (); // 获 得 当前 秒 数 
var timer = "+ ((hours > 12) ? hours - 12 : hours);// 将 小 时 数值 赋予 变量 timer 
timer += ((minutes < 10) ? ":0" : ":") + minutes; // 将 分 钟 数 值 赋予 变量 timer 
timer += ((seconds < 10) ? ":0" : ":") + seconds; // 将 秒 数值 赋予 变量 timer 
timer +=" "+ ((hours > 12) ? "pm' : "am"); // 将 am 或 pm 赋予 变量 timer 
document .clock.show.value = timer; // 在 表单 中 输出 变量 timer 的 值 
setTimeout ("showtime ()",1000) ; // 每 隔 一 秒 钟 自动 调用 一 次 showtime () 函数 
}</script> 
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图 6-8 ”打开 网 页 文档 图 6-9 输入 代码 
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使 由 于 通过 用 getHours( 方 法 所 获得 的 当前 小 时 数 是 以 24 小 时 制 所 表示 的 ， 因 此 这 里 就 做 了 一 个 判 
断 ， 如 果 小 时 数 大 于 12， 就 采用 所 获 小 时 数 减 去 12 后 的 结果 ， 否 则 就 直接 采用 所 获得 的 小 时 数 。 

使 使 用 “document.clock.show.value=timer;”， 该 语句 的 作用 是 在 名 为 clock 的 表单 中 的 show 文 
本 框 中 输出 变量 timer 的 值 。 

仗 在 <body> </body> 标 记 中 ， 使 用 <form> 标 记 定 义 了 一 个 表单 ， 并 用 name 属 性 为 其 命名 ， 然 后 在 
<form> 标 记 中 又 使 用 <input> 标 记 定义 了 一 个 表单 元 素 ， 即 一 个 文本 框 ， 也 使 用 name 属 性 为 其 
命名 。 

使 setTimeout() 方 法 是 由 windows 对 象 所 提供 的 ， 用 来 实现 经 过 一 定时 间 后 自动 进行 指定 处 理 。 


该 语句 的 意思 就 是 1 秒 后 调用 showtime()。 由 于 setTimeout() 方 法 中 的 时 间 是 以 毫秒 为 单位 进 
行 计算 的 ， 因 此 1000ms 就 等 于 1s。 


(3) 将 光标 放置 在 <body > 标记 内 ， 输 入 代码 onLoad=“showtime()”， 如 图 6-10 所 示 。 
(4) 在 <body> 和 </body> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 6-11 所 示 。 


<form name="clock" onSubmit="0"> 


<input type="text" name="show" size="15"> </form> 


[ET 


seh gram 
ET 


本 


图 6-10 输入 代码 
(5) 保存 文档 ， 在 浏览 器 中 浏览 效果 ， 如 图 6-12 所 示 
区 


图 6-12 显示 当前 时 间 效 果 
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课 后 练习 


@ 
1. 填空 题 
(1) JavaScript 中 的 对 象 是 由 和 两 个 基本 的 元 素 构成 的 。 
(2) 把 对 象 的 所 有 引用 都 设置 为 ， 可 以 强制 性 地 废除 对 象 。 


(3) 浏览 器 对 象 模型 (Browser Object Model) 尚 无 正式 标准 。 由 于 现代 浏览 器 已 经 实现 了 
JavaScript 交 互 性 方面 的 相同 方法 和 属性 ， 因 此 常 被 认为 是 的 方法 和 属性 。 

2. 操作 题 

制作 一 个 简单 的 JavaScript 弹 出 窗口 ， 如 图 6-13 所 示 。 


[nn 生 下 
CD 。 莘 天 5 交 答 


中 新建 实例 为 ，[objest Objecg 


3 CEL PET 


| 图 6-13 ” JavaScript 弹出 窗口 
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第 7 章 
JavaScript 中 的 事件 


本 章 导读 

JavaScript 使 我 们 有 能 力 
创建 动态 页 面 。 事 件 是 可 以 被 
JavaScript 侦 测 到 的 行为 。 网 页 
中 的 每 个 元 素 都 可 以 产生 某 些 可 
以 触发 JavaScript 函 数 的 事件 。 
比方 说 ， 我 们 可 以 在 用 户 单 击 某 
按钮 时 产生 一 个 onClick 事 件 来 触 
发 某 个 函数 。 事 件 要 在 HTML 页 
面 中 定义 。 


技术 要 点 

@ 事件 与 事件 驱动 

@ 常见 事件 

@ 其 他 常用 事件 

@ 将 事件 应 用 于 按钮 中 


FEE 


onresize 页 面 大 小 事件 
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JavaScript 中 的 事 人 f 


1 


将 事件 应 用 于 按钮 中 


事件 驱动 与 事件 处 理 


@ 事件 驱动 是 JavaScript 响 应 用 户 操 作 的 一 种 处 理 方式 ， 而 事件 处 理 是 
JavaScript 响 应 用 户 操作 所 调用 的 程序 代码 。 
肛 7.1.1 事件 与 事件 驱动 


JavaScript 事 件 可 以 分 为 下 面 几 种 不 同 
类 别 。 最 常用 的 类 别 是 鼠标 交互 事件 ， 然 后 
键盘 和 表单 事件 。 

以 鼠标 为 例 ， 在 事件 驱动 中 ， 用 户 可 
使 用 鼠标 单 击 等 方式 进行 操作 ， 程 序 则 根 
鼠标 指针 的 位 置 以 及 单 击 的 方式 进行 响应 
JavaScript 使 用 的 就 是 这 种 事件 驱动 的 程序 
社 记 起。 

在 JavaScript 中 ， 事 件 (Even) 包括 以 
两 个 方面 : 

@ 用 户 在 浏览 器 中 产生 的 操作 是 事件 ， 如 单间 
标 、 按 下 键盘 上 的 键 等 。 


@@ 文档 本 身 产 生 的 事件 ， 如 文档 加 载 完毕 、 和 卸载 ; 


文档 等 ， 都 是 事件 。 
JavaScript 事 件 驱动 中 的 事件 是 通过 
标 或 热 键 的 动作 引发 的 。 它 主要 有 以 下 几 
事件 。 
1. 单 击 事件 onClick 
当 用 户 单 击 鼠 标 按钮 时 ， 产 生 onClick 
件 。 同 时 onClick 指 定 的 事件 处 理 程序 或 代码 
被 调用 执行 。 通 常 在 下 列 基 本 对 象 中 产生 : 
button 〈 按 钮 对 象 ) 


Em 


的 


忆 | 
是 ; 


以 | 
据 | 


设 | 


下 | 


娘 


让 到 


将 


checkbox 〈 复 选 框 ) 或 (检查 列表 框 
radio 〈 单 选 钮 ) 
reset buttons ( 重 置 按钮 
submit buttons (提交 按钮 ) 
例 ， 可 通过 下 列 按钮 激活 change() 文 件 : 
<form> 
<input type="button" value=" " 
| onclick="change () "> 
</form> 


在 onClick 等 号 后 ， 可 以 使 用 自己 编写 的 函 


| 数 作为 事件 处 理 程序 ， 也 可 以 使 用 JavaScript 
; 的 内 部 函数 ， 还 可 以 直接 使 用 JavaScript 的 代 


| 码 等 。 例 如 : 


<input type="button" value=" " 


: onclick=alert (" 这 是 一 个 例子 ") ; 


2. onChange 改 变 事件 
当 利 用 text 或 texturea 元 素 输入 字符 值 改变 
: 时 引发 该 事件 ， 同 时 当 在 select 表 格 项 中 一 个 
i 选项 状态 改变 后 也 会 引发 该 事件 。 

例如 以 下 是 引用 片段 : 
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<form> 


<input type="text" name="Test" value="Test" onCharge="check (this.test)"> 


</form> 


3. 选中 事件 onSelect 
当 Text 或 Textarea 对 象 中 的 文字 被 加 亮 后 ， 引 发 该 事件 。 
4。 获 得 焦点 事件 onFocus 


5. 失去 焦点 onBlur 


当 用 户 单 击 Text 或 textarea 以 及 Select 对象 时 ， 产 生 该 事件 。 此 时 该 对 象 成 为 前 


全 对 象 。 


当 text 对 象 或 textarea 对 象 以 及 Select 对 象 不 再 拥有 焦点 而 退 到 后 合 时 ， 引 发 该 文件 ， 它 与 


onFocas 事 件 是 一 个 对 应 的 关系 。 
6. 载 入 文件 onLoad 


当 文档 载 入 时 ， 产 生 该 事件 。onLoad 一 个 作用 就 是 在 首次 载 入 一 个 文档 时 检测 cookie 的 值 ， 


并 用 一 个 变量 为 其 赋值 ， 使 它 可 以 被 源 代 码 使 用 。 
7。 印 载 文件 onUnload 
当 Web 页 面 退出 时 引发 onUnload 事 件 ， 并 可 更 新 Cookie 的 状态 。 


国 7.1.2 事件 与 处 理 代码 关联 


在 JavaScript 中 ， 浏 览 器 会 使 用 事件 来 通知 JavaScript 程 序 响应 用 户 的 操作 。 事 件 的 类 型 有 


在 事件 产生 的 
时 候 ， 浏 览 器 会 调用 一 个 JavaScript 程 序 来 响应 这 个 事件 ， 这 就 是 JavaScript 的 事件 处 理 方式 。 


很 多 种 ， 如 鼠标 事件 、 键 盘 事件 、 加 载 与 卸载 事件 、 得 到 焦点 与 失去 焦点 事件 等 。 


特定 的 


其 中 ， 要 使 事件 处 理 程序 能 够 启动 ， 必 须 先 告诉 对 象 ， 如 果 发 生 了 什么 事情 ， 要 启动 什么 处 理 程 
序 ， 否 则 这 个 流程 就 不 能 进行 下 去 。 事 件 的 处 理 程序 可 以 是 任意 JavaScript 语 句 ， 一 般 
自 定义 函数 (function) 来 处 理事 件 。 

事件 处 理 程序 有 3 种 方法 。 

。 直接 在 HTML 标 记 中 指定 。 方 法 是 : 

< 标记 事件 =" 事 件 处 理 程序 ” [事件 =" 事 件 处 理 程序 ”. . .] > 

例如 : 

<body ... onload="alert (' 网 页 读 取 完 成 ! )" onunload="alert (欢迎 浏览 ! ') "> 


这 样 的 定义 <body> 标 记 ， 能 使 文档 在 读 取 完毕 的 时 候 弹出 一 个 对 话 框 ， 写 着 “网 页 读 取 完 


成 
2 编写 特定 对 象 特定 事件 的 JavaScript。 方 法 是 : 


; 在 用 户 退 出 文档 (或 者 关闭 窗口 ， 或 者 到 另 一 个 页 面 去 ) 的 时 候 弹出 “欢迎 浏览 ! ”字样 。 


<script language="JavaScript" for=" 对 象 " event=" 事 件 "> 
(事件 处 理 程序 代码 ) 


</script> 


<script language="JavaScript" for="window" event="onload"> 
alert (' 网 页 读 取 完成 ! ) ; 


</script> 


3. 在 JavaScript 中 说 明 。 方 法 : 


< 事件 主角 ”对象 >. < 事件 > = < 事件 处 理 ; 


程序 >; 

用 这 种 方法 要 注意 的 是 ，“ 事 件 处 理 程 ; 
序 ” 是 真正 的 代码 ， 而 不 是 字符 串 形式 的 代 | 
码 。 如 果 事 件 处 理 程序 是 一 个 自 定义 函数 ， 如 ; 
无 使 用 参数 的 需要 ， 就 不 要 加 “()” 标 记 。 | 

function ignoreError() { 

return true; 

} 

window.onerror = ignoreError; // : 
没有 使 用 " ()" : 


这 个 例子 将 ignoreError() 函数 定义 为 | 
window 对 象 的 onerror 事 件 的 处 理 程序 。 它 的 效 | 
果 是 忽略 该 Window 对 象 下 任何 错误 (由 引用 不 | 
允许 访问 的 location 对 象 产 生 的 “没有 权限 ” 错 | 


误 是 不 能 忽略 的 ) 。 


在 JavaScript 中 对 象 事件 的 处 理 通常 由 函 | 
数 (function) 担任 。 其 基本 格式 与 函数 全 部 一 | 
样 ， 可 以 将 前 面 所 介绍 的 所 有 函数 作为 事件 处 ; 


理 程序 。 
格式 如 下 : 
Eunction 事件 处 理 名 (参数 表 ) { 
事件 处 理 语句 集 ; 


例如 下 例 程序 是 一 个 自动 装载 和 自动 卸载 | 
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实例 代码 : 


<!doctype html> 


JavaScript 中 的 捉 人 


<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<script language="JavaScript"> 

i 

function loadform(){ 

alert ("自动 装载 1") ; 

. 

function unloadform(){ 

alert (" 印 载 ") ; 

} 

WW 

</script> 

</head> 

<body> 

<body onLoad="loadform()" OnUnload= 
"unloadform()"> 

<a href="test.htm"> 调 用 </a> 


的 例子 ， 即 当 装 入 HTML 文 档 时 调用 loadform() | 
函数 ， 而 退出 该 文档 进入 另 一 HTML 文 档 时 则 


首先 调用 unloadform() 函 数 ， 在 确认 
进入 。 


国 7.1.3 调用 函数 的 事件 


Web 浏 览 器 中 的 JavaScript 实 现 允 许 我 们 定义 响应 上 


后 方 可 ; 


</body> 
</html> 
运行 代码 的 效果 如 图 7-1 所 示 。 
| 谨 于 = Te 
| | 


图 7-1 事件 与 处 理 代 码 


户 事件 (通常 是 鼠标 或 者 键盘 事件 ) 所 


执行 的 代码 。 在 支持 Ajax 的 现代 浏览 器 中 ， 这 些 事件 处 理 函 数 可 以 被 设置 到 大 多 数 的 可 视 元 素 之 
上 。 可 以 使 用 事件 处 理 函 数 将 可 视 用 户 界面 〈《 即 视图 ) 与 业务 对 象 模型 相连 接 。 
传统 的 事件 模型 在 JavaScript 诞 生 的 早期 就 存在 了 ， 它 是 相当 简单 和 直接 的 。DOM 元 素 有 几 


个 预先 定义 的 属性 ， 可 以 赋值 为 回 
首先 定义 函数 : 


调 函 数 。 


99 


JavaScript 网 页 设计 与 网 站 特效 因 让 芭 相 二 


function Hanshu() 
{ 
// 函 数 体 . - - 


这 样 我 们 就 定义 了 一 个 名 为 Hanshu 的 函 ; 


数 ， 现 在 尝试 调用 一 下 这 个 函数 。 其 实 很 简 | 
单 ， 调 用 函数 就 是 用 函数 的 名 称 加 括号 ， 即 ; 


Hanshu() 7 


这 样 就 调用 了 这 个 函数 。 

实例 代码 : 

<!doctype html> 

<meta charset="utf-8"> 
<script> 

function showname (name) 

{ 

document .write ("我 是 "+name); 
} 

showname (" 雨 轩 ") ; / /函数 调 用 
</script> 

</html> 


本 例 中 的 function showName(name) 为 函数 


定义 ， 其 中 括号 内 的 name 是 函数 的 形式 参数 ， 


这 一 点 与 C 语 言 中 的 函数 形式 是 完全 相同 的 ,而 ; 


Showname(“ 雨 轩 ”) 则 是 对 函数 的 调用 ， 上 
现 需要 的 功能 ， 运 行 代码 的 效果 如 图 7-2 所 示 。 


图 7-2 ”调用 函数 


国 7.1.4 调用 代码 的 事件 


JavaScript 的 出 现 给 静态 的 HTML 网 页 带 来 


很 大 的 变化 。JavaScript 增 加 了 HTML 网 页 的 互 
动 性 ， 使 以 前 单调 的 静态 页 面 变 得 有 交互 性 ， 
100 


于 实 | | 


EE ee ES | 
了 PP | 
ea OA IAT Sm | : 
Nendo 

执 是 而 秆 

2 mn ener ee Ra 


| 它 可 以 在 浏览 器 端 实现 一 系列 动态 的 功能 ， 仅 
| 仅 依靠 浏览 器 就 可 以 完成 一 些 与 用 户 的 互动 。 
| 实例 代码 ， 

<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<script language="javascript"> 

function test() 

{ 

alert ("调用 代码 的 事件 ") ; 

} 

</script> 

</head> 

<body onLoad="test ()" > 

<form action="" method="post"> 
| <input type="button" value=" 单 机 测试 
: " onclick="test ()"> 

</form> 

</body> 

</html> 


运行 代码 的 效果 如 图 7-3 所 示 。 


HE 加 | 加 
LT PD -| 


加 | 区 本 


ET 


| 一 图 7-3 和 人 加 和 和 
. 上 7.1.5 ”设置 对 象 事件 的 方法 


event 对 象 作为 Window 对 象 的 一 个 属性 存 


在 ; 使 用 attachEvent() 添 加 事件 处 理 程序 时 ， 


| 会 有 一 个 event 对 象 作为 参数 被 传 入 事件 处 理 函 
， 数 中 ， 当 然 也 可 以 通过 window.event 来 访问 ; 
使 用 html 特 性 指定 的 事件 处 理 程序 则 可 以 通过 
| event 的 变量 来 访问 事件 对 象 。 
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实例 代码 : 


<script type="text/javascript"> 
window.onload = function(){ 

Var btn = document .getElementById ("myBtn"); 
if (btn.addEventListener){ 
btn.addEventListener ("click", function (event){ 
alert (event .type); 

},false); 

}else{ 

btn.attachEvent ("onmouseout", function (event){ 
alert (event.type + " " + Wwindow.event.type); 
]) 

btn.onmouseover = function(){ 

alert (window.event .type) 7 

] 7 

} 

} 

</script> 

<input type="button" id="myBtn" value="click" onclick="alert (event.type)"/> 


运行 代码 的 效果 如 图 7-4 所 示 。 | eons ee ee 


1 OY lovmscenrgan emer "|x th em | 


a 曾 pyeve5cp 后 7 但 汪 有 大 末 二天 


| 区 ET CERT 


图 7-4 运行 代码 效果 


和 we 


事件 的 产生 和 响应 ， 都 是 由 浏览 器 来 完成 的 ， 而 不 是 由 HTML 或 
JavaScript 来 完成 的 。 使 用 HTML 代 码 可 以 设置 哪些 元 素 响应 什么 事件 ， 使 用 JavaScript 可 以 告诉 
浏览 器 怎么 处 理 这 些 事件 。 然 而 ， 不 同 的 浏览 器 所 响应 的 事件 有 所 不 同 ， 相 同 的 浏览 器 在 不 同 版 
本 中 所 响应 的 事件 也 会 有 所 不 


上 7.2.1 课堂 小 实例 一 Click 事 件 
Click 事 件 是 在 一 个 对 象 上 按 下 然后 释放 一 个 鼠标 按钮 时 发 生 的 ， 它 也 会 发 生 在 一 个 控件 的 值 
改变 时 。 对 一 个 Form 对 象 来 说 ， 该 事件 是 在 单 击 一 个 空白 区 或 一 个 无 效 控件 时 发 生 的 。 对 一 个 控 


可 
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件 来 说 ， 这 类 事件 发 生 在 单 击 控件 对 象 的 特定 区 域 时 。 


单 击 事件 一 般 应 用 于 Button 对 象 、Checkbox 对 象 、Image 对 象 、Link 对 象 、Radio 对 象 、Reset 对 
象 和 Submit 对 和 象 。Button 对 象 一 般 只 会 用 到 onClick 事 件 处 理 程序 ， 因 为 该 对 象 不 能 从 用 户 那 里 
得 到 任何 信息 ， 如 果 没 有 onClick 事 件 处 理 程序 ， 按钮 对 象 将 不 会 有 任何 作用 。 


使 用 单 击 事件 的 语法 格式 如 下 : 
基本 语法 : 
onClick= 函 数 或 是 处 理 语句 


实例 代码 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 

<tit1le> 无 标题 文档 </title> 

</head> 

<body><input type="submit" name="submit" value=" 打 印 本 页 " 


onClick="javascript:window.print()"> 


</body> 

</html> 

本 段 代码 为 运用 onClick 事 件 ， 设 置 当 单 击 | 直 
按钮 时 实现 打印 功能 。 运 行 代码 的 效果 如 图 7-5 | | .过节 -二 
所 示 。 | Es jn 二 Sy 


A 


| 区 er 


图 7-5” ”onClick 事件 


肯 7.2.2 课堂 小 实例 一 一 onchange 事 件 


onchange 事 件 会 在 域 的 内 容 改 变 时 发 生 。 在 下 拉 列 表 框 中 ， 只 要 修改 了 可 选项 ， 就 会 激发 
onchange 事 件 ， 在 文本 框 中 ， 该 事件 只 有 在 修改 了 文本 框 中 的 文字 并 在 文本 框 失去 焦点 时 才 会 被 


基本 语法 : 
on change= 函 数 或 是 处 理 语句 
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实例 代码 : 


本 段 加 粗 代 码 在 一 个 文本 框 中 使 用 了 | | 
: 本 和 
是 
了 本 | ETL TT. wa ”| 
图 7-6 ”onchange 事 件 


onchange=alert(" 输 入 搜索 内 容 ")， 来 显示 表单 ; 
内 容 变化 引起 onchange 事 件 执行 处 理 效果 。 这 
里 的 onchange 结 果 是 弹出 提示 信息 框 。 运行 代 ; 


码 后 的 效果 如 图 7-6 所 示 。 


中 7.2.3 ”课堂 小 实例 一 一 onSelect 事 件 一 一 一 一 一 一 一 一 一 0 
onSelect 事 件 是 指 当 文本 框 中 的 内 容 被 选中 时 所 发 生 的 事件 。 


基本 语法 : 


JavaScript 网 页 设计 与 网 站 特效 识 党 实录 “ee_®@ 


本 段 代 码 定义 函数 处 理 下 拉 列 表 框 的 选择 | 
事件 ， 当 选择 其 中 的 文本 时 输出 提示 信息 。 运 
行 代码 的 效果 如 图 7-7 所 示 。 


图 7-7 处 理 下 拉 列 表 框 事件 


@ _。 第 7/ 章 ES 


旧 7.2.4 ”课堂 小 实例 一 一 onfocus 事 件 

获得 焦点 事件 (onfocus) 是 当 某 个 元 素 获得 焦点 时 触发 的 事件 处 理 程序 。 失 去 焦点 事件 
(Conblur) 是 当前 元 素 失 去 焦点 时 触发 的 事件 处 理 程 序 。 在 一 般 情况 下 ， 这 两 个 事件 是 同时 使 
的 。onfocus 事 件 即 得 到 焦点 通常 是 指 选中 了 文本 框 等 ， 并 且 可 以 在 其 中 输入 文字 。 

基本 语法 : 

onfocus= 处 理 函 数 或 是 处 理 语句 


实例 代码 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 

<script type="text/javascript"> 

function setstyle (x) 

{ 

document .getElementById (x) .style.background="red" 
1 

</script> 

</head> 

<body> 

用 户 名 : <input type="text" 
onfocus="setstyle (this.id)" id="fname" /> 
<br /> 

密码 : <input type="text" 
onfocus="setStyle (this.id)" id="lname" /> 
</body> </html> 


在 本 例 中 ， 当 输入 框 获得 焦点 时 ， 其 背景 : 
颜色 将 改变 ， 运 行 代码 的 效果 如 图 7-8 所 示 。 | 


| 
图 | 
i 医 ven rar es TE 


图 7-8 onfocus 事 件 


上 月 7.2.5 ”课堂 小 实例 一 一 onload 事 件 

onload 事 件 会 在 页 面 或 图 像 加 载 完 成 后 立即 发 生 。 加 载 事 件 (onload) 与 卸载 事件 
Conunload) 是 两 个 相反 的 事件 。 加 载 事件 是 指 整个 文档 在 浏览 器 窗口 中 加 载 完毕 后 所 激发 的 事 
件 。 卸 载 事件 是 指 当前 文档 从 浏览 器 窗口 中 印 载 时 所 激发 的 事件 ， 即 关闭 浏览 器 窗口 或 从 当前 网 
页 跳 转 到 其 他 网 页 时 所 激发 的 事件 。onLoad 事 件 的 语法 格式 如 下 。 
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课堂 实录 “e 一 他 
基本 语法 : 
onLoad= 处 理 函 数 或 是 处 理 语句 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<script type="text/Javascript"> 

< 

function MM popupMsg (msg) { //v1.0 
alert (msg); 

} 


0 

</script> 

</head> 

<body onLoad="MM popupMsg (' 北 京 欢 迎 你 ! ') "> 

</body> 

</html> 

在 代码 中 加 粗 部 分 的 代码 应 用 了 onLoad 事 | 来 自 网 页 的 消息 
件 ， 在 浏览 器 中 预览 效果 时 ， 会 自动 弹出 提示 | mm | 
的 对 话 框 ， 如 图 7-9 所 示 。 : 奉 ver! 


图 7-9 onLoad 事 件 


有 7.2.6 课堂 小 实例 一 一 鼠标 移动 事件 


鼠标 移动 事件 包括 3 种 ， 分 别 为 onmouseover、onmouseout 和 onmousemove 。 


onmouseover 是 当 鼠 标 移动 到 对 象 之 上 时 所 激发 的 事件 ，onmouseout 是 当 鼠 标 从 对 象 上 移 开 


中 ， 


时 所 


激发 的 事件 ，onmousemove 是 鼠标 在 对 象 上 进行 移动 时 所 激发 的 事件 。 可 以 用 这 3 个 事件 在 指定 


的 对 象 上 移动 鼠标 时 ， 实 现 其 对 象 的 动态 效果 。 
基本 语法 : 
onMouseover= 处 理 函 数 或 是 处 理 语句 
onMouseout= 处 理 函 数 或 是 处 理 语句 
onMousemove= 处 理 函 数 或 是 处 理 语句 
实例 代码 : 


<!doctype html> 


ir 


<html> 
<head> 


<meta charset="utf-8"> 
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<title> 无 标题 文档 </title> 

<style type="text/css"> 

<ls= 

#Layerl {position:absolute;width:257px;height:17lpx;z-index:1;visibility: hidden;} 

--> 

</style> 

<script type="text/Javascript"> 

es 

function MM findobj (n, d) { //v4.01 

var pi,x; if(!d) d=document; if((p=n.indexOf("?"))>0g&parent.frames.length) { 

d=parent .frames[n.substring (p+1)] .document; n=n.substring(0,p);} 

if(! (x=d[n])&&d.all) x=d.all[n]; for (i=0; !x&&i<d.forms.length;i++) x=d.forms[i] [n]; 

for (i=0; !x&&d. layers&&i<d.1layers.length;i++) x=MM findob]j (n,d.1layers[i] .document); 

if(!x && d.getElementById) x=d.getElementById(n); return x; 

1 

function MM showHideLayers() { //v6.0 

Var i,p,V,obj,args=MM showHideLayers.arguments; 

for (i=0; i<(args.length-2); i+=3) if ((obj=MM findobj (args[i]))!=null) { 
v=args [i+2]; 

if (obj.style) { obj=obj.styley Vv=(v=—='show) ?visible': (v 一 hide') ?hidden':v; } 

obj .visibility=vy } 

]! 

WR 

</script> 

</head> 

<body> 

<input name="Submit" type="submit" 

onMouseOver="MM showHideLayers('Layerl',",'show')" value=" 显 示 图 像 ” /> 

<div id="Layerl"><img src="1.jpg" width="890" height="560" /></div> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 应 用 了 
onmouseover 事 件 ， 在 浏览 器 中 预览 效果 ， 将 
光标 移动 到 “显示 图 像 ” 按 钮 的 上 方 以 显示 医 
像 ， 如 图 7-10 所 示 。 


图 7-10 ”onMouseOver 事件 
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JavaScript 网 页 设计 与 网 站 特效 因 让 下 想起 


7.2.7 


本 框 中 ， 再 将 光标 移动 到 其 
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失去 焦点 事件 正好 与 获得 焦点 事件 相对 ， 
引发 的 事件 。 


实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


<title> 无 标题 文档 </title> 


<script type="text/JavasScript"> 


<!-- 


课堂 小 实例 一 一 onblur 事 件 


失去 焦点 (onblur) 是 指 将 焦点 从 当前 对 象 中 移 开 所 


function MM popupMsg (msg) { //v1.0 


alert (msg); 
} 
J 
</script> 
</head> 
<body> 
<p> 用 户 登录 : </p> 


<p> 用 户 名 : <input name="textfield" type="text" 
onBlur="MM_popupMsg (文档 中 的 "用 户 名 "文本 域 失 去 焦点 ! ')"” /> 


</p> 


<p> 密 码 : <input name="textfield2" type="text" 
onBlur="MM_popupMsg (文档 中 的 "密码 "文本 域 失 去 焦点 ! ')"”/> 


</p> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 应 用 


了 onblur 妇 


7-11 所 示 。 


他 的 位 置 ， 就 会 弹出 一 个 提示 对 


图 7- 


件 ， 在 浏览 器 中 预览 效果 ， 将 光标 移动 到 任意 一 个 文 
话 框 ， 说 明 某 个 文本 框 失去 焦点 ， 如 


i 


| Sr EE 


11 onblur 事 件 


/.3 
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其 他 常用 事件 


在 前 面 讲述 的 事件 都 是 HTML 4.01 中 所 支持 的 标准 事件 。 除 此 之 外 ， 大 


多 浏览 器 都 还 定义 了 一 些 其 他 事件 ， 这 些 事件 为 开发 者 开发 程序 带 来 了 很 大 的 便利 ， 也 使 程序 更 
为 丰富 和 人 性 化 。 其 他 常用 的 事件 如 表 7-1 所 示 。 


表 7-1 ”其 他 常用 事件 

事 件 含义 
onabort 当 页 面 上 的 图 片 没完 全 下 载 时 ， 单 击 浏览 器 上 “停止 ”按钮 时 触发 的 事件 
onbeforeunload 当前 页 面 的 内 容 将 要 被 改变 时 触发 此 事件 
onerror 当 出 现 错误 时 触发 此 事件 
onfinish 当 Marquee 元 素 完成 需要 显示 的 内 容 后 触发 此 事件 
onbeforecopy 页 面 当 前 的 被 选择 内 容 将 要 复制 到 浏览 者 系统 的 剪贴 板 前 触发 此 事件 
onbounce 在 marquee 内 的 内 容 移 动 至 marquee 显 示范 围 之 外 时 触发 此 事件 
onstart 当 marquee 元 素 开 始 显示 内 容 时 触发 此 事件 
onbeforeupdate 当 浏 览 者 粘贴 系统 剪贴 板 中 的 内 容 时 通知 目标 对 象 
onrowenter 当前 数据 源 的 数据 发 生变 化 并 且 有 新 的 有 效 数 据 时 触发 的 事件 
onscroll 浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 此 事件 
onstop 浏览 器 的 “停止 ”按钮 被 按 下 时 或 者 正在 下 载 的 文件 被 中 断 时 触发 此 事件 

当 页 面 中 的 一 部 分 或 者 全 部 的 内 容 被 移 离 当 前 页 面 的 剪贴 板 并 移动 到 浏览 者 的 系统 
onbeforecut 
剪贴 板 时 触发 此 事件 

onbeforeeditfocus 当前 元 素 将 要 进入 编辑 状态 时 触发 此 事件 
onbeforepaste 内 容 将 要 从 浏览 者 的 系统 剪 贴 板 粘 贴 到 页 面 中 时 触发 此 事件 
oncopy 当 页 面 当前 的 被 选择 内 容 被 复制 后 触发 此 事件 
oncut 当 页 面 当前 的 被 选择 内 容 被 剪 切 时 触发 此 事件 
ondrag 当 某 个 对 象 被 拖 动 时 触发 此 事件 [活动 事件 ] 
ondragdrop 一 个 外 部 对 象 被 鼠标 拖 进 当前 窗口 或 者 帧 
ondragend 当 鼠 标 拖 动 结束 时 触发 此 事件 ， 即 鼠标 的 按钮 被 释放 了 
ondragenter 当 对 象 被 鼠标 拖 动 的 对 象 进入 其 容器 范围 内 时 触发 此 事件 
ondragleave 当 对 象 被 鼠标 拖 动 的 对 象 离开 其 容器 范围 内 时 触发 此 事件 
ondragover 当 某 被 拖 动 的 对 象 在 另 一 对 象 容器 范围 内 拖 动 时 触发 此 事件 
ondragstart 当 某 对 象 将 被 拖 动 时 触发 此 事件 
ondrop 在 一 个 拖 动 过程 中 ， 释 放 鼠 标 键 时 触发 此 事件 
onlosecapture 当 元 素 失去 鼠标 移动 所 形成 的 选择 焦点 时 触发 此 事件 
onpaste 当 内 容 被 粘贴 时 触发 此 事件 


onselectstart 
onafterupdate 
oncellchange 
ondataavailable 
ondatasetchanged 
ondatasetcomplete 
onerrorupdate 
onrowexit 
onrowsdelete 
onrowsinserted 
onafterprint 


当 文 本 内 容 选 择 将 开始 发 生 时 触发 的 事件 

当 数据 完成 由 数据 源 到 对 象 的 传送 时 触发 此 事件 

当 数据 来 源 发 生变 化 时 触发 的 事件 

当 数据 接收 完成 时 触发 的 事件 

数据 在 数据 源 发 生变 化 时 触发 的 事件 

当 来 自 数据 源 的 全 部 有 效 数据 读 取 完 毕 时 触发 此 事件 
当 使 用 onbeforeupdate 事 件 触发 取消 了 数据 传送 时 ， 代 替 onafterupdate 事 件 
当前 数据 源 的 数据 将 要 发 生变 化 时 触发 的 事件 

当前 数据 记录 将 被 删除 时 触发 此 事件 

当前 数据 源 将 要 插入 新 数据 记录 时 触发 此 事件 
当 文 档 被 打印 后 触发 此 事件 
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事 件 含义 
onbeforeprint 当 文 档 即 将 打印 时 触发 此 事件 
onfilterchange 当 某 个 对 象 的 滤 镜 效果 发 生变 化 时 触发 的 事件 
onhelp 当 浏览 者 按 下 F1 键 或 者 浏览 器 的 帮助 被 选择 时 触发 此 事件 


onpropertychange 当 对 象 的 属性 之 一 发 生变 化 时 触发 此 事件 
onreadystatechange | 当 对 象 的 初始 化 属性 值 发 生变 化 时 触发 此 事件 


续 表 


实战 应 用 一 一 将 事件 应 用 于 按钮 中 


@ 事件 响应 编程 是 JavaScript 编 程 的 主要 方式 ， 在 前 面 介绍 时 已 经 使 
大 量 的 事件 处 理 程序 。 下 面 通过 一 个 综合 实例 介绍 将 事件 应 用 在 按钮 中 ， 具 体操 作 步 骤 如 下 。 


(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 7-12 所 示 。 


(2) 打开 拆 分 视图 ， 在 <body> 和 </body> 之 间 相 应 的 位 置 输 入 以 下 代码 ， 如 


<form name="buttonForm"> 


图 


7-13 所 示 。 


本 


<input type="button"” value=" 按 钮 ”name="button1"” onclick="alert (' 按 钮 被 点 击 


)"><br> 
</form> 
<script language="JavaSscript"> 
<!-- 
function clickbuttonl (){ 
document .buttonForm.buttonl.click(); 
} 
--> 


</script> 


DW AR MD i AD WM WO) Hee Mais BOMW Mot .1 
dh x a 
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a 


图 7-12 打开 网 页 文档 
(3) 保存 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 7-14 所 示 。 
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@ oo 第 7/ 章 四 ERESSHGJSNE 吉 


DU de irda E > | 
JO [Oro Te 


和 与 各 因 风 全 一 这， 不断 挥 表 ， 扒 队 册 新 ， 有 有 民 
3 一 | 诊 灾 化 号 十 字 拓 工 芝 有 机 地 后 反 来 ， 合 中国 准 十 字 颖 产品 走出 国门 三 
全 emet | GPR FR 往 ” 二 1 


图 7-14 将 事件 应 用 于 按钮 中 的 效果 


课 后 练习 o 


1. 填空 题 

(1) JavaScript 事 件 可 以 分 为 下 面 几 种 不 同 的 类 别 。 最 常用 的 类 别 是 
表单 事件 。 

(2) 事件 的 产生 和 响应 ， 都 是 由 来 完成 的 ， 而 不 是 由 HTML 或 JavaScript 来 完成 的 。 

(3) 鼠标 移动 事件 包括 3 种 , 分 别 为 _、 和 _ 


， 然 后 是 键盘 和 


2， 操作 题 
创建 一 个 当 用 户 单 击 “提交 ”按钮 时 ， 会 显示 一 个 对 话 框 ， 如 图 7-15 所 示 。 
Emi Wa mina Poe Eee ms 可 到 
OO Down -|4[x| th es 和 ER 
rm 
请 输入 内 容 。 
EE 
ie///DylaveSeriotH ET @ ice rr a 人 00% ~ 


7-15 JavaScript 弹出 窗口 
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第 8 章 
window 对 象 


本 章 导 读 

window 对 象 表示 浏览 器 
中 打开 的 窗口 。 如 果 文 档 包 含 
框架 ， 浏览 器 会 为 HTML 文 档 
创建 一 个 window 对 象 ， 并 为 每 
个 框架 创建 一 个 额外 的 window 
对 象 。JavaScript 的 输入 可 以 
通过 window 对 象 来 实现 。 使 用 
Window 对 象 产生 用 于 客户 与 页 面 
交互 的 对 话 框 主要 有 3 种 : 警告 
框 、 确 认 框 和 提示 框 等 ， 这 3 种 对 
话 框 使 用 Window 对 象 的 不 同方 法 
产生 ， 其 功能 也 不 大 相同 。 


技术 要 点 NG 


@ window 对 象 

@ window 对 象 事件 及 使 用 方法 
@ 对 话 框 

@ 状态 栏 

@ 窗口 操作 


@-e 一 第 8 章 
实例 展示 


让 前 介 京华 才 启 名册 本 务 。 识 乐 省。 向 十 进 。 产生 和 


全 屏 显示 窗口 定时 关闭 窗口 


8 | T= 


所 有 浏览 器 都 支持 Window 对 象 ， 它 表示 浏览 器 窗口 。 所 有 JavaScript 的 
全 局 对 象 、 函 数 以 及 变量 均 自 动 成 为 Window 对 象 的 成 员 。 


有 旧 8.1.1 window 对象 介 绍 
window 对 象 表示 一 个 浏览 器 窗口 或 一 个 } 要 引用 一 个 框架 的 父 窗口 〈 或 父 框架 ) ， 

框架 。 在 客户 端 JavaScript 中 ，window 对 象 是 ; 可 以 使 用 下 面 的 语法 : 

全 局 对 象 ， 所 有 的 表达 式 都 在 当前 的 环境 中 计 : 


| parent // 当 前 窗口 的 父 窗 口 
算 。 也 就 是 说 ， 要 引用 当前 窗口 根本 不 需要 特 | self.parent 。。“// 当 前 窗口 的 父 窗口 
殊 的 语法 ， 可 以 把 那个 窗口 的 属性 作为 全 局 变 | 。”b.parent // 窗 口 b 的 父 窗口 
量 来 使 用 。 例 如 ， 可 以 只 写 document, 而 不 必 一 一 一 一 一 一 一 一 一 一 一 
ind curnents | 要 从 顶层 窗 口 含有 的 任何 一 个 框架 中 引 
同样 ， 可 以 把 当前 窗口 对 象 的 方法 当 作 函数 来 | 它 ， 可 以 使 用 如 下 语法 : 
使 用 ， 如 只 写 alert()， 而 不 必 写 成 window.alert()。  ; top // 当 前 框架 的 顶层 窗口 
除了 上 面 列 出 的 属性 和 方法 ，window 对 象 还 实 | self.top // 当 前 框架 的 顶层 窗口 
现 了 核 bJavaSaipt 所 定义 的 所 有 全 局 属性 和 方法 。 £f.top // 框 架 f 的 项 层 窗口 


i ge ne | 新 的 顶层 浏览 器 窗口 由 方法 window open() 
的 是 它 自 己 。 当 起 中 隐 雹 引用 当前 窗口 ， 而 | 创建 。 当 调用 该 方法 时 ， 应 把 open() 调 用 的 反 
不 仅仅 是 隐 式 地 引用 它 时 ， 可 以 使 用 这 两 个 属 | 右 信 在 储 在 一 个 变 妈 中， 然后 使 用 那个 变星 来 


性 。 除 了 这 两 个 属性 之 外 ，parent 属 性 、top 属 ; 引用 新 窗口 。 新 窗口 的 opener 属 性 反 过 来 引 


ii 了 与 当前 window 对 象 : 了 打开 它 的 那个 窗口 。 
相关 的 其 他 window 对 象 。 。 | 一 般 来 说 ，window 对 象 的 方法 者 是 对 浏览 
要 | 用 窗口 中 的 -个 本 ,可 以 使 I 下 语法 。 | 器 窗口 或 框架 进行 革 种 操作 。 而 alert() 方 法 、 


和 // 当 前 窗口 的 框架 i confirm() 方 法 和 prompt 方 法 则 不 同 ， 它 们 通过 
self.frame[il // 当 前 窗口 的 框架 简单 的 对 话 框 与 用 户 进行 交互 。 
b.frame[il] // 窗 口 b 的 框架 : 
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中 的 顶层 对 象 ， 其 包含 多 个 常 


方法 和 属性 。 


于 一 个 window 对 象 。 
访问 Window 对 象 的 属性 和 方法 : 
window. 属 性 名 或 方法 


window， 直 接 使 用 属性 名 和 方法 。 
window 对 象 的 主要 方法 : 


钮 的 警告 框 。 使 用 方法 是 : 
alert( 字符 串 ) 


@ confirm(): 弹出 一 个 带 有 


方法 是 : 
confirm( 字符 串 ) 


当 用 户 用 “确认 ”按钮 关闭 这 个 对 话 框 
“取消 ”按钮 关 | 


时 ， 它 返回 “true”， 如 果 上 
闭 这 个 对 话 框 ， 则 返回 “false”。 


@ prompt0: 弹出 一 个 带 有 输入 框 的 对 话 框 . 使 : 


方法 是 : 


prompt ( 字符 串 1， 字 符 串 2 ) 


息 ，“ 字 符 串 2” 是 在 输入 框 中 显示 的 文本 。 
当 用 户 F 

时 ， 它 返回 输入 框 中 的 文本 ， 如 果 用 “取消 ” 

按钮 关闭 这 个 对 话 框 ， 返 回 “null”。 


@ open(0: 打开 一 个 弹出 式 窗口 。 目 前 很 多 浏览 | 


器 都 设置 了 屏蔽 弹出 窗口 的 功能 ， 这 会 导致 用 ; @ se 


open() 方 法 建立 的 窗口 无 法 打开 。 语 法 : 


Window. open (URL,name, features, replace); 


URL 是 一 个 可 选 的 字符 串 ， 声 明了 要 在 新 | 
窗口 中 显示 的 文档 的 URL， 如 果 省 略 了 这 个 参 | 
数 ， 或 者 它 的 值 是 空 字符 串 ， 那 么 新 窗口 就 不 | 


会 显示 任何 文档 。 
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确认 ”按钮 关闭 这 个 对 话 框 | @ close0， 关 闭 当前 窗口 。 这 个 功能 多 用 于 制 人 


课堂 实录 “e 一 全 
肯 8.1.2 ” window 对象 的 使 用 方法 


window 对 象 是 JavaScript 浏 览 器 对 象 模型 | 


name 是 一 个 可 选 的 字符 串 ， 该 字符 串 是 


一 个 由 去 号 分 隔 的 特征 列表 ， 其 中 包括 数字 、 
每 个 窗口 (包括 浏览 器 窗口 和 框架 窗口 ) 对 应 | 


字母 和 下 划 线 ， 该 字符 声明 了 新 窗口 的 名 称 ， 


| 这 个 名 称 可 以 用 作 标记 <a> 和 <form> 的 属性 
| target 的 值 ， 如 果 该 参数 指定 了 一 个 
”的 窗口 ， 那 么 open() 方 法 就 不 再 创建 一 个 新 窗 
| 口 ， 而 只 是 返回 对 指定 窗口 的 引 
由 于 Window 对 象 是 顶层 对 象 ， 所 以 如 果 ; 况 下 ，features 将 被 忽略 。 
访问 的 是 当前 窗口 的 window 对 象 ， 可 以 省 略 ; 


已 经 存在 


， 在 这 种 情 


features 是 一 个 可 选 的 字符 串 ， 声 明了 新 


| 窗口 要 显示 的 标准 浏览 器 的 特征 ， 如 果 省 略 该 
i 参数 ， 新 窗口 将 具有 所 有 标准 特征 。 
@ alert0; 弹出 一 个 带 有 一 段 消息 和 一 个 确认 按 | 


replace 是 一 个 可 选 的 布尔 值 ， 规 定 了 装载 


| 到 窗口 的 URL 是 在 窗口 的 浏览 历史 中 创建 一 个 
| 新 条 目 ， 还 是 替换 浏览 历史 中 的 当前 条 目 。 其 
个 “ 确 | 支持 下 面 的 值 ，true-URL， 替 换 浏 览 历史 中 的 
认 ” 按 钮 、 一 个 “取消 ”按钮 的 对 话 框 。 使 用 | sani 在 浏览 历史 中 创建 新 的 


| @ scrollBy(): 把 窗 


内 容 滚 动 指定 的 距离 。 
这 个 功能 多 用 于 实现 窗口 的 自动 滚屏 。 使 有 
方法 是 : 


scrollBy( xnum, ynum ) 


“xnum” 是 文档 在 横向 滚动 的 距离 ， 


“ynum” 是 文档 在 纵向 滚动 的 距离 。 它 们 的 值 


| 可 正 可 负 ， 单 位 为 像素 。 
: 多 print(): 打印 当前 窗口 的 内 容 。 它 会 弹出 一 个 


“字符 串 1” 是 在 对 话 框 中 显示 的 提示 信 | 


打印 对 话 框 ， 让 用 户 定制 打印 。 语 法 如 下 : 


window.print (); 


关闭 按钮 。 语 法 如 下 : 


window.close(); 


Timeout(): 使 用 window 对 象 的 
SetTimeout 方 法 可 以 延迟 代码 的 执行 时 间 ， 
也 可 以 用 该 方法 来 指定 代码 的 执行 时 间 。 用 于 
在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 : 


setTimeout (code,millisec); 


例如 : 


vindow 导 家 


function clock(){ 

document .getElementById (test') .innerHTML = i++; 
setTimeout ("clock()",1000); 

} 


@ clearTimeout(): window 对 象 中 的 clearTimeout 方 法 可 以 取消 延迟 执行 的 代码 。 因 为 在 实 
际 应 用 中 ， 如 果 有 时 出 现 特殊 情况 ， 不 再 需要 程序 自 延 迟 执行 的 时 候 ， 就 得 想 办 法 取消 延迟 。 
clearTimeout 方 法 可 以 做 到 这 一 点 。 语 法 如 下 : 


clearTimeout (id of settimeout); 


例如 : 


var timer; 

function clock(){ 

document .getElementById (test') .innerHTML = i++; 
timer = setTimeout ("clock()",1000); 

} 

function stop(){ 

clearTimeout (timer); 


@ setinterval(): 代码 延迟 执行 机 制 在 执行 一 次 后 就 失效 。 而 在 实际 应 用 中 ， 设 计 者 有 时 希望 某 个 程序 
能 反复 执行 ， 比 如 说 倒计时 等 ， 需 要 每 秒 执行 一 次 。 为 此 可 以 使 用 window 方 法 的 setInterval 方 法 ， 
该 函数 设置 一 个 定时 器 ， 每 当 定 时 的 时 间 到 时 就 调用 一 次 用 户 设 定 的 定时 器 函数 。 

按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 ，setlnterval() 方 法 会 不 停 地 调用 函 

数 ， 直 到 clearlnterval() 被 调用 或 窗口 被 关闭 ， 由 setlnterval() 返 回 的 ID 值 可 用 作 clearlnterval() 方 法 

的 参数 。 语 法 如 下 : 


setInterval (code,millisec); 


例如 : 


alert (http://baidu.com); 
} 
window.setInterval ('clock()',1000); // 每 一 秒 弹 一 次 框 


@ clearInterval(): 使 用 setinterval 方 法 可 以 设 定 计 时 器 ， 设 定 计 时 器 时 将 返回 一 个 计时 器 的 引用 。 当 
不 再 需要 的 时 候 可 以 使 用 clearinterval 方 法 移 除 计时 器 ， 其 接收 一 个 计时 器 |D 作 为 参数 。 语 法 如 下 : 


clearInterval (id of setinterval); 


例如 : 


Var timer = window.setInterval ('clock()',1000); 
function clock(){ 

if(i == 3){ 

window.clearIinterval (timer); 

} 

document .getElementById('test') .innerhtml = i++;} 


当 i 为 3 时 ， 停 止 。 
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Window 对 象 是 浏览 器 窗口 对 文档 提供 一 个 显示 的 容器 ， 是 每 一 个 加 载 
文档 的 父 对 象 。Window 对 象 还 是 所 有 其 他 对 象 的 项 级 对 象 ， 通 过 对 Window 对 象 的 子 对 象 进行 操 
作 ， 可 以 实现 更 多 的 动态 效果 。 


旧 8.2.1 课堂 小 实例 一 一 装载 文档 
Location 对 象 的 assign() 方 法 用 于 加 载 一 个 新 的 文档 ， 语 法 如 下 : 
基本 语法 : 


location.assign (URL) 


实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tit1le> 无 标题 文档 </title> 
<script type="text/javascript"> 
function setAssign(){ 
window.location.assign ("http://www.baidu.com"); 
} 
</script> 
</head> 
<body> 
<button onclick="setAssign()"> 加 载 新 文档 </button> 
</body> 
</html> 


运行 代码 ， 当 单 击 “ 加 载 新 文档 ”按钮 时 ， 触 发 Assign() 函 数 ， 浏 览 器 将 访问 百度 首页 ， 如 图 
8-1 和 图 8-2 所 示 。 


| EV A ET eH 
认 WE= 大 i 


B 


3 FEL = 


图 8-1 单 击 按 钮 图 8-2 加载 新 文档 


人 性 8.2.2 课堂 小 实例 一 一 获取 窗口 外 侧 以 及 内 侧 尺 寸 


利用 JavaScript 可 以 获取 浏览 器 窗口 的 尺寸 ， 实 时 了 解 窗口 的 高 度 和 宽度 。 


re PE | 
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@ eo 第 8 章 
语法 说 明 : 
在 该 语法 中 ，innerheight 属 性 和 innerwidth 
re 属性 分 别 用 来 指定 窗口 内 部 显示 区 域 的 高 度 和 


基本 语法 : | 
FREE | 宽度 。Outerheight 和 outerwidth 属 性 分 别 用 来 


Window.innerheight 


i 指定 含 工 具 栏 及 状态 栏 的 窗口 外 侧 的 高 度 及 宽 
i 度 。IE 浏 览 器 不 支持 这 些 属性 。 


Window.outerwidth 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title></title> 

</head> 

<style type="text/css"> 

be 

body { background-color: #ffffff; } 

es 

</style> 

</head> 

<body> 

* 获 取 窗 口 的 外 侧 尺寸 及 内 侧 尺寸 

<p><script type="text/javascript"> 

< 

document .write ("窗口 的 高 度 (内 侧 ) : ",window.innerHeight); 

document .write ("<br>"); 
document .write (" 窗 口 的 宽度 (内 侧 ) : ",window.innerWidth); 
document .write ("<br>"); 
document .write ("窗口 的 高 度 (外 侧 ) : ",window.outerHeight); 
document .write ("<br>"); 
document .write ("窗口 的 宽度 (外 侧 ) : " ,window.outerWidth); 

WI 

</script> 

</p> 

</body> 

</html> 


运行 代码 ， 改 变 浏览 器 窗口 的 大 小 ， 效 果 如 图 8-3 和 图 8-4 所 示 。 


DE ee x 
* 获 取 窗口 的 外 侧 尺寸 及 内 侧 尺 十 


窗口 的 高 度 (内 侧 )，488 
窗口 的 宽度 (内 侧 ): 499 
窗口 的 高 度 (外 侧 )，551 


窗口 的 宽度 (外 侧 )，515 


图 8-3 ”获取 窗口 外 侧 以 及 内 侧 尺寸 图 图 8-4 改变 浏览 器 窗口 的 大 小 
Tix 
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人 8.2.3 课堂 小 实例 一 一 调整 窗口 的 大 小 

有 时 候 需 要 控制 显示 窗口 的 大 小 ， 可 以 使 用 resizeto 把 窗口 设置 成 指定 的 宽 
处 理 该 事件 时 进行 窗口 尺寸 的 调整 。 

基本 语法 : 


resizeto (w,h); 


把 窗 体 宽度 调整 为 w 个 像素 ， 高 度 调整 为 h 个 像素 ，w 与 h 不 能 使 用 负数 。 
实例 代码 : 


高 度 。 可 以 在 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<input type="button"” value=" 控 制 自己 的 浏览 器 " 
onclick="window.resizeTo(600,400);" /> 

<input type="button" value=" 调 整 宽 为 50 像 素 ， 高 为 60 像 素 !" 
onclick="window.resizeTo(50,60);" /> 

<input type="button"” value=" 调 整 宽 为 500 像 素 ， 高 为 600 像 素 !" 
onclick="window.resizeTo(500,600);" /> 

</body> 

</html> 


单 击 相应 的 按钮 即 可 控制 窗口 宽度 ， 运 行 
代码 在 浏览 器 中 预览 ， 效 果 如 图 8-5 所 示 。 


SEN SE Ce TR Sm 
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图 8-5 调整 窗口 的 大 小 
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在 客户 端 浏览 器 中 有 3 种 常见 的 window 方 法 用 来 弹出 简单 对 话 框 ， 
们 分 别 是 alert()、confirm() 和 prompt()。alert() 用 于 向 用 户 显 示 消息 。confirm() 要 求 用 户 单 击 “ 


认 ” 或 “取消 ”按钮 。prompt() 要 求 用 户 输入 一 个 字符 串 。 
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Er 


于 过 


@-e… 第 8 章 
有 8.3.1 课堂 小 实例 一 一 警告 对 话 框 


alert() 方 法 用 于 显示 带 有 一 条 指定 消息 和 | 。 alert 只 接受 一 个 参数 ， 这 个 参数 是 一 个 字 
一 个 “确定 ”按钮 的 警告 框 。alert() 方 法 弹出 ; 符 串 ，alert 所 做 的 全 部 事情 是 将 这 个 字符 串 原 
的 对 话 框 只 是 显示 提示 信息 ， 对 用 户 起 到 提醒 : 封 不 动 地 以 一 个 提示 框 的 形式 返回 给 用 户 ， 运 
作 | 行 代码 的 效果 如 图 8-6 所 示 。 


基本 语法 : 


alert (message); | ea Os 


ET REE Em 


”message 是 要 在 window 上 弹出 的 对 话 框 中 
显示 的 纯 文本 。 | 
实例 代码 : 


<script type="text/Javascript"> 


= 
alert ("早上 好 !"); 


</script> 


HT PET Ri 


图 8-6 警告 对 话 框 


用 8.3.2 课堂 小 实例 一 一 询问 对 话 框 

confirm() 方 法 用 来 确认 某 一 问题 的 答案 ， 按 “确定 ”按钮 ， 对 话 杠 会 返回 true， 按 “取消 ” 按 
钮 ， 对 话 框 会 返回 false。 用 户 必须 单 击 其 中 一 个 按钮 才能 使 程序 继续 执行。 

基本 语法 : 


confirm (message); 


message 是 要 在 Window 上 弹出 的 对 话 框 中 显示 的 纯 文本 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<script type="text/javascript"> 

if (confirm ("你 是 学 生 吗 ?") == true){ // 如 果 用 户 单 击 了 确定 按钮 
alert ("原来 你 真是 一 个 学 生 ") ; // 输 出 : 原来 你 真是 一 个 学 生 

下 

elsef{ 

alert ("你 不 是 学 生 ") ; // 如 果 用 户 单 击 了 取消 按钮 ， 就 会 输出 : 你 不 是 学 生 
} 

</script> 

</body> 

</html> 
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户 是 否 关闭 ， 运 行 代码 的 效果 如 图 8-7 所 示 。 


如 果 单 击 “ 确 认 ” 按 包 就 会 输出 “原来 你 真是 | 上 
如 果 单 击 “取消 ”按钮 ， 则 输出 | 


一 个 学 生 ”， 


“你 不 是 学 生 ”。 


| 
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在 关闭 窗口 前 ， 通 过 confirm 对 话 框 询问 用 | 


PEE DET 


图 8-7 询问 对 话 框 


作 8.3.3 课堂 小 实例 一 一 输入 对 话 杠 


prompt() 方 法 
出 问题 ， 第 二 个 文本 字符 串 
就 会 什么 也 不 显示 。 

基本 语法 : 

window.prompt( 提示 信息 ， 默 认 值 ) 


语法 说 明 : 


返回 null。 如 果 用 户 单 击 “ 确 认 ” 按 钮 ， 则 返回 | 
输入 字段 当前 显示 的 文本 。 


在 用 户 点 击 “确定 ”按钮 或 “取消 ” 按 | 
钮 把 对 话 框 关闭 之 前 ， 它 将 阻止 用 户 对 浏览 ; 
器 的 所 有 输入 。 在 调用 prompt() 时 ， 将 暂停 | 


对 JavaScript 代码 的 执行 ， 在 用 户 做 出 响应 之 
前 ， 不 会 执行 下 一 条 语句 。 
实例 代码 : 
<script language="javascript"> 
function qustion() 
Var result 
result=window.prampt (你 今年 多 大 了 ? ", "20") ; 
if (result=="18") 
alert ("你 真 聪明 ! ! 1!") 
SLse 
alert ("请 你 再 猜 猜 !") ; 
上 
</script> 


<input type="submit" name="Submit" : 


value=" 多 大 了 " onclick="qustion()" /> 
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来 要 求 用 户 输入 少量 的 信息 ， 该 方法 有 两 个 参数 ， 第 一 个 文本 字符 串 向 用 户 提 
是 文本 框 中 显示 的 初始 默认 值 ， 如 果 第 二 个 参数 为 空 字符 串 ， 文 本 杠 


本 实例 通过 window 对 象 的 prompt 方 法 实 


| 现 用 户 数据 的 输入 ， 单 击 “ 多 大 了 ”按钮 ， 可 
| 以 弹出 一 个 对 话 框 ， 如 图 8-8 所 示 ， 输 入 相应 的 
| 年 龄 ， 如 果 不 对 则 显示 “请 你 再 猜 猜 !”， 如 图 


如 果 用 户 单 击 提示 框 的 “取消 ”按钮 ， 则 | 8-9 所 示 。 


BE Eap wo eet ee lal 央 
ET El | 


Wem SEs 


| 区 . PEE 
图 8-8 输入 对 话 杠 
NN 
来 自 网 页 的 湛 息 es 


全 不 对 ， 请 你 再 猜 猜 吧 ! 


图 8-9 提示 信息 


vindow 对 家 


1 一 


@ 每 个 浏览 器 窗口 的 底部 都 有 一 个 状态 栏 ， 它 用 来 向 用 户 显示 一 些 特定 的 


消息 。 


轩 8.4.1 状态 栏 介绍 

状态 栏 是 包含 文本 输出 窗 格 或 “指示 器 ”的 控制 条 。 输 出 窗 格 通常 用 作 消 息 行 和 状态 指示 
器 。 消 息 行 示例 包括 命令 帮助 消息 行 ， 它 简要 解释 了 “MFC 应 用 程序 向 导 ” 所 创建 的 默认 状态 栏 
的 最 左边 窗 格 中 选 定 的 菜单 或 工具 栏 命令 。 状 态 指示 器 示例 包括 SCROLL LOCK 键 、NUM LOCK 
键 和 其 他 键 。 

状态 栏 是 指 每 个 窗口 、 程 序 操作 界面 的 最 底 端 ， 通 常 可 以 在 “视图 ”或 “查看 ”菜单 下 将 其 
打开 或 关闭 ， 就 是 前 面 加 “ 勾 ” 就 打开 ， 打 “又 ”就 关闭 的 部 分 。 

IE 浏览 器 的 状态 栏 如 图 8-10 所 示 。 


四 6 
医 全 Internet | 保护 模式 : 全 用 给” 瑟 100% ~ | 


图 8-10 ”状态 栏 


轩 8.4.2 课堂 小 实例 一 一 默认 状态 栏 信息 
window 对 象 的 defaultStatus 属 性 可 以 用 | 性 设置 默认 的 状态 栏 信息 ， 运 行 代码 的 结果 如 
来 设置 在 状态 栏 中 的 默认 文本 ， 当 不 显示 瞬 ; 图 8-11 所 示 。 


间 信 息 时 ， 状 态 栏 可 以 显示 这 个 默认 文本 。 es ee = 
defaultStatus 属 性 是 一 个 可 读 写 的 字符 串 。 : ee NT wm 
实例 代码 : : 
<script language="JavaScript"> 
// 设 置 浏览 器 状态 栏 的 默认 值 : 
defaultstatus = ' 默 认 状态 栏 信 息 '; 
</script> 


实例 通过 Window 对 象 的 defaultStatus 属 ; 
本 实例 通 和 Windpwaj 儿 的 delauwltStatns 忆 ,| 图 8-11 默认 的 状态 栏 信息 


用 8.4.3 ”课堂 小 实例 一 一 状态 栏 瞬间 信息 

属性 status 主 要 用 于 存放 瞬时 消息 ， 即 当 有 触发 事件 发 生 的 时 候 才 会 改变 状态 栏 的 信息 。 
只 有 当 触 发 事件 发 生 的 时 候 ， 状 态 栏 上 面 的 文本 才 会 被 指定 的 status 替 换 ， 否 则 将 一 直 显 示 
defaultStatus 属 性 指定 的 内 容 。 

实例 代码 : 


<script language="javascript"> 


IE 
function setstatus () 
Var d =new Date () 7 


Var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSseconds(); 
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JavaScript 网 页 设计 与 网 站 特效 国 让 到 本 二 


window.status=time; 
setInterval ("setstatus ()",1000); 


——> 
</script> 
本 实例 使 用 定义 定时 器 函数 ， 向 浏览 器 的 | [外 3 ey 


Oe vemosmennznen || ||d or P 
EE 
页 WE | 闫 天 5 本 xx 约 


状态 栏 输出 当前 时 间 信 息 ， 运 行 代码 的 效果 如 
图 8-12 所 示 。 | 


天 Hn | pe 玫 而， Abow - 


图 8-12 状态 栏 瞬间 信息 


窗口 操作 


8 @ S 窗口 是 Web 浏 览 器 中 最 重要 的 界面 元 素 ，JavaScript 提 供 了 许多 操作 窗 


口 的 工具 ，JavaScript 处 理 窗口 的 方式 与 处 理 框架 很 相似 。 
国 8.5.1 课堂 小 实例 一 一 打开 新 窗口 


open() 方 法 可 以 查找 一 个 已 经 存在 的 或 者 ; 
新 建 的 浏览 器 窗口 。 如 果 name 参 数 指定 了 一 
个 已 经 存在 的 浏览 器 窗口 ， 则 返回 对 该 窗口 的 | 
引用 。 返 回 的 窗口 中 将 显示 URL 中 指定 的 文 ; 
档 ， 但 是 features 参 数 会 被 忽略 。open() 方 法 是 | 
avaScript 中 唯一 通过 名 称 获 得 浏览 器 窗口 引 | 
| 多 replace: 可 选 布尔 参数 ， 设 置 新 窗口 中 的 操 


Cs 


用 的 途径 。 


如 果 没 有 指定 name 参 数 ， 或 者 不 存在 | 
name 参 数 指定 的 名 称 的 窗口 ，open() 方 法 将 创 ; 


建 一 个 新 的 浏览 器 窗口 。 
基本 语法 : 


window.open (URL, name, features, | 
| eigth=688,width=554"); 


replace) 


@ URL: 可 选 字符 申 参数 ， 指 向 要 在 新 窗口 中 显 | 
示 的 文档 的 URL。 如 果 省 略 该 参数 ， 或 者 参数 | 


为 空 字符 串 ， 新 窗口 不 会 显示 文档 。 


窗口 的 名 称 。 
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@ name: 可 选 字符 趾 参 数 ， 该 参数 可 以 设置 新 制 弹出 新 的 窗口 indexe.html， 用 height=280、 
: width=297 分 别 设置 打开 浏览 器 窗口 的 宽度 和 高 


| 度 ， 运 行 代码 的 效果 如 图 8-13 所 示 。 


相同 name 的 窗口 只 能 创建 一 个 ， 要 想 创建 
多 个 窗口 则 name 不 能 相同 。 
name 不 能 包含 有 空格 。 
多 features: 可 选 字符 串 参数 ， 该 参数 用 于 设 定 
新 窗口 的 功能 。 因 为 该 参数 是 可 选 的 ， 如 果 没有 
指定 该 参数 ， 新 窗口 将 拥有 所 有 的 标准 功能 。 


作 历 史 的 保存 方式 。 
实例 代码 : 


<script type="text/javascript"> 
€ 
window.open ("index.html","index","h 


1 
</script> 


Window.open ( ‘index.html’” ) 


于 控 


vindow 对 家 


ET | 


Ee pueseipmneTAiesensam -|X | 外 > Pp"| 
= = 一 = 


FTESZ 全 > 100% ， 


图 8-13 ”打开 新 窗口 


用 8.5.2 课堂 小 实例 一 一 窗口 名 字 


Window.open 方 法 可 以 设置 新 窗口 的 名 称 ， 该 窗口 名 称 在 a 元 素 和 form 元 素 的 target 属 性 中 使 


基本 语法 : 


window.open (pageURL, name, parameters) 


语法 说 明 : 


pageURL 为 子 窗口 路 径 。 

name 为 子 窗口 句柄 。 

parameters 为 窗口 参数 〈 各 参数 用 逗号 分 隔 ) 。 
实例 代码 : 


<script language="javascript"> 

function name() 

{ 

Window.open ("http://www.baidu.com","'myForm","height=300, width=200, scrollbars=yes"); 
} 


name (); 
</script> 
本 实例 应 用 open 方 法 打开 百度 网 首页 , 文 : 
档 名 为 myFrom， 高 为 300， 宽 为 200， 运 行 代 | 1 - 时 一 
码 的 效果 如 图 8-14 所 示 。 | sa es 如 5 二 此 [EE| 
ee 
Bai 红 百度 
[TIE 二 EREETTCZ 2 
图 8-14 打开 窗口 


人 用 8.5.3 课堂 小 实例 一 一 关闭 窗口 


window.close() 方 法 用 于 关闭 指定 的 浏览 器 窗口 。 如 果 不 带 窗口 引用 则 调用 close() 函 数 ， 


JavaScript 网 页 设计 与 网 站 特效 国语 芋 相 直 2 
JavaScript 就 关闭 当前 窗口 。 在 事件 处 理 程 序 中 ， 必 须 指定 window.close()， 而 不 能 仅仅 使 用 close()。 
基本 语法 : 


window.close(); 


@ 所 有 的 窗 体 都 可 以 使 用 此 函数 关闭 。 

@@ 对 于 通过 使 用 open 芳 数 打开 的 窗 体 ， 使 用 close 函 数 将 直接 关闭 。 

@ 对 于 非 Oopen 打 开 的 窗 体 ， 或 者 对 整个 浏览 器 调用 close 函 数 时 将 弹出 一 条 关闭 信息 ， 询 问 是 否 关闭 。 
户 可 以 拒绝 关闭 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 
<script language="javascript"> 
function closeWindow() 
{ 

if(self.closed) 

{ 

alert ("窗口 已 经 关闭 ") 

} 

else 

{ 

self.close() 

} 

} 

</script> 

</head> 

<body> 

<label> 

<input type="submit" name="Ssubmit" onClick="closeWindow()"” value=" 关 闭 窗口 ”> 
</label> 

</body> 

</html> 


本 实例 应 用 if 语句 判断 是 否 关闭 窗口 ， 如 | 
果 没 有 就 关闭 窗口 。 单 击 按钮 即 可 提示 是 否 # 
闭 ， 运 行 代码 的 效果 如 图 8-15 所 示 。 


EA | 二 ET 


图 8-15 关闭 窗口 
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vindow 对 家 


有 8.5.4 课堂 小 实例 一 一 窗口 的 引用 


window.parent 是 iframe 页 面 调 用 父 页 面 对 象 。 


基本 语法 : 


window.parent 


如 果 窗口 本 身 是 项 层 窗 口 ，parent 属 性 返回 的 是 对 自身 的 引 f 


o 


在 框架 网 页 中 ， 一 般 父 窗口 就 是 项 层 窗口 ， 但 如 果 框 架 中 还 有 框架 ， 父 窗口 和 项 层 窗口 就 不 


一 定 相 同 了 。 
实例 代码 ; 


<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 


</head> 
<body> 


<form name="form]l" id="forml"> 


<input type="text" name="username" id="username"/> 


</form> 


<iframe src="p.html" width=100%></iframe> 


</body> 
</html> 


需要 在 b.htm 中 对 上 面 代码 中 的 username | 运行 代码 的 效果 如 图 8-16 所 示 。 


文本 框 赋值 ， 就 如 很 多 上 传 功能 ， 上 传 功能 页 ; 
在 lfrmae 中 ， 上 传 成 功 后 把 上 传 后 的 路 径 放 入 : 
父 页 面 的 文本 框 中。 应 该 在 p.html 中 输入 相应 ; 


代码 ， 如 下 : 


<script type="text/javascript"> 
Var _ParentWin = window.parent ; 


_PparentWin.forml.username.value = ! 


"窗口 的 引用 "”; 


</script> 


8.6 


图 8-16 窗口 的 引用 


实战 应 用 


JavaScript 最 强大 的 功能 也 就 在 于 能 够 直接 访问 浏览 器 窗口 对 象 及 其 中 


的 子 对 象 。Window 对 象 表示 的 是 浏览 器 窗口 ， 它 有 多 种 操作 ， 其 中 一 个 重要 的 方法 是 open， 表 示 
新 建 一 个 窗口 来 打开 指定 页 面 。 
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JavaScript 网 页 设计 与 网 站 特效 四 荆 相 二 


实战 1 一 一 全 屏 显 示 窗 口 
本 实例 将 讲述 关于 全 屏 浏览 器 窗口 网 页 的 制作 ， 具 体操 作 步 骤 如 下 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 8-17 所 示 。 
(2) 打开 拆 分 视图 ， 在 <body> 和 </body> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 8-18 所 示 。 


<div align="center"> 
<input type="button" name="FullScreen” value=" 全 屏 显示 " 
onClick="window.open (document .location, 'big', 'fullscreen=yes')"> 


</div> 


ED 


图 8-17 打开 网 页 文档 | 图 8-18 输入 代码 
(3) 保存 文档 ， 在 浏览 器 中 浏览 效果 ， 如 图 8-19 所 示 。 


于 员 角 介 商人 帘 遍 者 饮 服务 如 乐 设 羔 各 配送。 其它 服务 


E73 


图 8-19 全 屏 显示 效果 


实战 2 一 一 定时 关闭 窗口 
本 实例 将 讲述 定时 关闭 网 页 器 窗口 ， 具 体操 作 步 骤 如 下 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 8-20 所 示 。 
(2) 打开 拆 分 视图 ， 在 <head> 和 </head> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 8-21 所 示 。 


<script language="javascript"> 
l= 

function clock() 

{i=i-1 


document .title=" 本 窗口 将 在 "+i+" 秒 后 自动 关闭 !"; 
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indow 导 家 


if(i>0) setTimeout ("clock();",1000); 
else Seif.close(});} 

var i=10 

clock(); 

1 

</script> 


DW xp Ses se WA oem mel ss wey EW mep mw. 加 0 


图 8-20 ”打开 网 页 文档 图 8-21 输入 代码 


(3) 保存 文档 ， 在 浏览 器 中 浏览 效果 ， 如 图 8-22 所 示 。 
ee -二 pe 


en Btn 


Fer 


图 8-22 定时 关闭 效果 


8 7 课 后 练习 
@ 


1. 填空 题 


(qi 是 JavaScript 浏 览 器 对 象 模型 中 的 项 层 对 象 ， 其 包含 多 个 党 


每 个 窗口 (包括 浏览 器 窗口 和 框架 窗口 》 对 应 于 一 个 . 
(2) Javascript 中 的 就 是 当 光标 落 在 文本 框 中 时 发 生 的 事件 。 


方法 和 属性 。 


lr 


JavaScript 网 页 设计 与 网 站 特效 国 让 到 本 二 
把 窗口 设置 成 指定 的 宽度 和 高 


(3) 有 时 候 需 要 控制 显示 窗口 的 大 小 ， 可 以 使 用 
度 。 可 以 在 处 理 该 事件 时 进行 窗口 尺寸 的 调整 。 


2. 操作 题 
创建 在 状态 栏 显示 问候 的 语句 ， 如 图 8-23 所 示 。 


E:\ 正 在 写 的 书 \Htal JavaScript 网 页 制作 与 开发 完全 手册 \ 效 果 \CH20\ 在 ， 


DO [rE lxX 
文件 人 ) ”编辑 下 ) 查看 WD 收藏 夹 &) 工具 0) 帮助 人 0 

突 收 评 天 | 高 图 百度 ， 肘 迅雷 看 看 -中 国 第 一 高 清 

已:\ 正 在 写 的 书 \Htnl 了 对 ”页 面 E)。 安全 GE) ”工具 @) ~ 


0 胃 页 面 时 ， 在 状态 栏 中 显示 问 帆 滞 


图 8-23 ”在 状态 栏 显示 问 候 语 句 
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第 9 章 
屏幕 和 浏览 器 对 象 


本 章 导 读 

每 个 window 对 象 的 Screen 
属性 都 引用 一 个 Screen 对象 。 
Screen 对 象 中 存放 着 有 关 显 示 浏 
览 器 屏幕 的 信息 。JavaScript 程 
序 将 利用 这 些 信 息 来 优化 它们 的 
输出 ， 以 达到 用 户 的 显示 要 求 。 
navigator 也 成 为 浏览 器 对 象 ， 该 
对 象 用 来 描述 客户 端 浏览 器 的 相 
关 信息 。 


技术 要 点 


检测 显示 器 参数 


客户 这 显示 器 屏幕 的 有 效 宽度 和 
获取 浏览 器 对 象 的 属性 值 
MimeType 对 象 和 Plugin 对 象 


JavaScript 网 页 设计 与 网 站 特效 aA 堂 实 录 “ee_® 
实例 展示 


2 


Er 


息 


浏览 器 状态 栏 显示 人 


| = 


屏幕 对 象 (Screen) 提供 了 获取 显示 器 信息 的 功能 ， 显 示 器 信息 的 主要 用 途 


是 确定 网 页 在 客户 机 上 所 能 达到 的 最 大 显示 空间 。 很 多 情况 下 ， 用 户 的 显示 器 大 小 尺寸 不 尽 相同 ， 以 同 
一 尺寸 设计 的 网 页 往往 得 不 到 期 望 的 效果 。 为 此 需 得 知 用 户 显示 器 的 信息 ， 在 运行 时 确定 网 页 的 布局 。 


课堂 小 实例 一 一 检测 显示 器 参数 


肯 9.1.1 


检测 显示 器 参数 有 助 了 


确定 网 页 在 客户 机 上 所 能 显示 的 大 小 ， 主 要 使 用 screen 对 象 提供 的 接 


口 。 显 示 的 参数 一 般 都 包括 显示 面积 的 宽 、 高 度 和 色 深 等 ， 其 中 宽 、 高 度 是 比较 有 意义 的 ， 直 接 


与 网 页 布局 相关 ， 色 深 只 是 影响 


图 形 色彩 的 逼真 程度 。 


表 9-1 所 示 是 screen 对 象 属性 一 览 。 


availHeight 
availWidth 
colorDepth 
height 
width 


属 性 


实例 代码 : 


<Script language="javascript"> 


with (document) 


和 

write 
write 
write 
write 
write 


write 
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表 9-1 screen 对象 的 属性 
说 明 
窗口 可 以 使 用 的 屏幕 高 度 ， 单 位 为 像素 
窗口 可 以 使 用 的 屏幕 宽度 ， 单 位 为 像素 
返回 目标 设备 或 缓冲 器 上 的 调 色 板 的 比特 深度 
屏幕 的 高 度 ， 单 位 为 像素 
屏幕 的 宽度 ， 单 位 为 像素 


// 用 with 语句 引用 document 的 属性 


(" 屏 幕 显示 设 定 值 : <p>") ; // 输出 提示 语句 


("屏幕 的 实际 高 度 "， 
("屏幕 的 实际 宽度 "， 
("屏幕 的 色 盘 深度 "， 
("屏幕 区 域 的 高 度 "， 
("屏幕 区 域 的 宽度 "， 


screen.availHeight, "<br>"); 
screen.availWidth, "<br>"); 
screen.colorDepth, "<br>"); 
screen.height, "<br>"); 


screen.width); 


</Script> 


运行 代码 的 效果 如 图 9-1 所 示 。 | Be 


De pmcrpAneriaszmai S -|x ||h am 


PELE ] CET 


图 9-1 检测 显示 器 参数 


人 用 9.1.2 课堂 小 实例 一 一 客户 端 显 示 器 屏幕 分 辩 率 

显示 器 分 辩 率 是 指 显示 器 所 能 显示 的 宽度 和 高 度 ， 通 常 以 像素 (pixel) 为 单位 ， 不 同 的 显示 器 的 分 
辨 率 也 就 有 可 能 不 同 。 目 前 主流 显示 器 分 辨 率 是 1280"800 和 1024*768。 在 实际 应 用 中 ， 为 了 使 制作 的 网 
页 能 适应 不 同 的 浏览 器 环境 ， 最 好 使 用 JavaScript 程 序 对 用 户 的 显示 器 进行 检测 ， 动 态 调整 网 页 的 布局 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<script type="text/javascript" language="javascript"> 

document .write (您 显示 器 的 分 辨 率 为 :\n' + screen.width + 'x' + screen.height + ' 像 素 ) 
</script> 

</body> 

</html> 


FE Windew Prenat opioriN, 一 
De CVs xX | ga ano 


运行 代码 的 效果 如 图 9-2 所 示 。 


证 HE SEE vv sa 。 | 


图 9-2 显示 器 屏幕 分 辩 率 
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旧 9.1.3 课堂 小 实例 一 客户 端 显示 器 屏幕 的 有 效 宽度 和 高 度 


有 效 宽度 和 高 度 是 指 打 开 客户 端 浏览 器 所 能 达到 的 最 大 宽度 和 高 度 。 在 不 同 的 操作 系统 中 ， 


操作 系统 本 身 也 要 占用 一 定 的 显示 区 域 ， 所 以 当 浏 览 器 窗口 以 最 大 化 打开 时 ， 不 一 定 占 满 整个 显 
示 器 屏幕 。 因 此 ， 有 效 的 宽度 和 高 度 就 是 指 浏览 器 窗口 所 能 占据 的 最 大 宽度 和 高 度 。 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<script language="javascript"> 

with (document) 

| 

writeln(" 网 页 可 见 区 域 宽 ， "+ document .body.clientWidth+"<br>"); 

writeln( "网 页 可 见 区 域 高 ; "+ document .body.clientHeight+"<br>") 

writeln(" 网 页 可 见 区 域 宽 (包括 边线 和 滚动 条 的 宽 ) : "+ document .body.offsetwidth +"<br>"); 
writeln( "网 页 可 见 区 域 高 (包括 边线 的 宽 ) : "+ document .body.offsetHeight +"<br>"); 
writeln (” 网 页 正文 全 文 宽 ; "+ document .body.scrollWidth+"<br>") 

writeln (” 网 页 正文 全 文 高 ; "+ document .body.scrollHeight+"<br>"); 

writeln( ”网 页 被 卷 去 的 高 (ff): "+ document .body.scrollTop+"<br>"); 

writeln (” 网 页 被 卷 去 的 高 (ie): "+ document .documentElement.scrollTop+"<br>"); 
writeln( "网 页 被 卷 去 的 左 : "+ document .body.scrollLeft+"<br>"); 

writeln( "网 页 正文 部 分 上 : "+ window.screenTop+"<br>") 7 

writeln ( "网 页 正文 部 分 左 : "+ window.screenLeft+"<br>"); 

writeln( "屏幕 分 辩 率 的 高 : "+ window.screen.height+"<br>") ; 

writeln ("” 屏幕 分 辩 率 的 宽 : "+ window.screen.width+"<br>"); 

writeln ("屏幕 可 用 工作 区 高 度 : "+ window.screen.availHeight+"<br>") 

writeln( "屏幕 可 用 工作 区 宽度 : "+ window.screen.availWidth+"<br>"); 

} 

</script> 

</body> 

</html> 


运行 实例 的 效果 如 图 9-3 所 示 。 


Ee 全 ||X | 名 32 
ah TET we 


A 本 i 


图 9-3 显示 器 屏幕 的 有 效 宽度 和 高 度 


月 9.1.4 


特 (bits) 进行 显 
比特 值 返回 可 以 显示 的 颜色 数量 。 比 如 ，256 


像素 时 是 8，65000 像 素 (在 Macintosh 中 是 |; 


32000 像 素 ) 的 情况 下 为 16。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

获取 显示 器 的 显示 信息 

<p> 

<script type="text/javascript"> 
二 二 和 


per pixel): ",screen.pixelDepth); 


; De navigator 是 一 


统 等 信息 ， rm 
肯 9.2.1 


document .write ("显示 器 的 深度 为 (bits | 


1 玫 寺 和 浏览 器 对 家 


课堂 小 实例 一 一 获取 显示 器 的 显示 信息 
pixelDepth 属 性 返回 每 像素 使 用 多 少 比 : : 
示 的 值 ，color-Depth 属 性 以 ; 


document .write ("<br>"); 


document .write ("可 使 用 的 颜色 数量 为 


: (bit 颜 色 ) : ", screen .colorDepth); 

/> 
</script> 
</p> 
</body> 
</html> 
运行 代码 的 效果 如 图 9-4 所 示 。 

er 
De DuascipmnarAa  *[t+ x | sin EE 


ET TE ET 
富 V | 类 元 5 六 
获取 显示 器 的 显示 信息 


示 器 的 深度 为 (bis per pxcl，undcfned 
RE 32 


CEPI -Ta] 00% » 


图 9-4 获取 显示 器 的 显示 信息 


个 独立 的 对 象 ， 用 于 提供 


户 所 使 用 的 浏览 器 以 及 操作 系 


课堂 小 实例 一 一 获取 浏览 器 对 象 的 属性 值 


在 进行 Web 开 发 时 ， 通 过 navigator 对 象 的 属性 来 确定 用 户 浏览 器 版 本 ， 进 而 编写 有 针对 相应 


浏览 器 版 本 的 代码 。 
基本 语法 : 
navigator.appName 
navigator.appCodeName 
navigator.appVersion 
navigator.userAgent 
navigator.platform 


navigator.language 


语法 说 明 : 
navigatorappName 获 取 浏 览 
navigator.appVersion 获 取 浏 览 


器 名 称 ，navigatorappCodeName 获 取 浏 览 
器 的 版 本 ，navigator.userAgent 获 取 浏 
platform 获 取 平 台 的 类 型 ，navigator.language 获 取 浏 


器 的 代码 名 称 ， 
户 代理 ，navigator. 


览 器 的 


览 器 的 使 用 语言 。 
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JavaScript 网 页 设计 与 网 站 特效 因 让 荆 相 二 


运行 代码 的 效果 如 图 9-5 所 示 ， 显 示 了 浏览 器 的 代码 、 名 称 、 版 本 、 语 言 、 编 译 平台 和 用 户 表 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title></head> 

<Script language="javascript"> 

with (document) 

{ 

write ("浏览 器 信息 : <OL>") ; 

write ("<LI> 代 码 : "+navigator.appCodeName); 
write ("<LI> 名 称 : "+navigator .appName); 
write ("<LI> 版 本 : "+navigator.appVersion); 
write ("<LI> 语 言 : "+navigator.language); 
write ("<LI> 编 译 平台 : "+navigator.platform); 
write ("<LI> 用 户 表 头 : "+navigator .userAgent); 
} 

</Script> 

</body> 

</html> 


头等 信息 。 


图 9-5 获取 浏览 器 对 象 的 属性 值 


肯 9.2.2 Plugin 插件 
一 个 Plugin 对 象 就 是 一 个 安装 在 客户 端的 插件 。 所 谓 插件 ， 就 是 浏览 器 用 于 显示 特定 类 型 嵌入 


数据 时 调用 的 软件 模块 。 
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每 个 Plugin 对 象 本 身 都 是 一 个 数组 ， 其 中 包含 的 每 个 元 素 分 别 对 应 了 
基本 语法 : 


navigator.plugins [i] .name 


navigator.plugins[il] .filename 
navigator.plugins[i] .description 


navigator.plugins[i].length 


户 从 帮助 菜单 中 选择 关于 插件 选项 可 以 获取 已 安装 插件 的 清单 。 


F 每 个 该 插 伯 


支持 的 MIME 类 型 。 


人 玫 寺 和 浏览 闫 对 和 


语法 说 明 : 


navigator.plugins[i].name 属 性 返回 插件 的 名 称 ，navigator.plugins[i].fllename 属 性 返回 文件 
名 ，navigator.plugins[i].description 属 性 返回 其 详细 信息 ，navigator.plugins[i].length 属 性 计算 插 
件 的 数量 ， 并 创建 可 以 在 该 浏览 器 中 使 用 的 插件 一 览 


实例 代码 : 


<script language="javascript"> 

document .writeln("<table border=1><tr valing=top>", 
"<th aling=left>A", 

"<th aling=left> 名 称 "， 

"<th aling=left> 文 件 名 "， 

"<th aling=left> 描 述 "， 

"<th aling=left> 类 型 </tr>") 

for (i=0; i < navigator.plugins.length; i++) { 
document .writeln ("<TR valing=top><TD>",i, 
"<td>", navigator.plugins[il] .name, 

"<td>", navigator.plugins[i] .filename, 

"<td>", navigator.plugins[i] .description, 
"<td>", navigator.plugins[i].1length, 

eA/tr> 

} 

document .writeln ("</table>") 


</script> 


本 实例 列 出 一 张 表 ， 其 中 显示 了 客户 端 每 个 Plugin 对 象 的 name、filename、 


length 属 性 ， 运 行 代码 的 效果 如 图 9-6 所 示 。 


便 根 据 不 同 的 用 户 的 情况 来 显示 或 执行 相应 的 代码 。 本 章 主要 介绍 浏 


FREE 
CS 下 DavascriptmF 人 3 于 关 力 “| 革 X] ga si 
EEC TIE 

语 Ws | 匡 天 5 时 


入 名 称 文件 名 描述 类 型 
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图 9-6 ”Plugin 对 象 


description 和 


@ 在 网 页 程序 设计 中 ， 经 常 需要 进行 浏览 器 和 用 户 浏览 器 性 能 的 检测 ， 以 


览 器 名 称 与 版 本 的 检测 与 显 


示 、 浏 览 器 对 JavaScript 的 支持 性 检测 、 随 时 获取 浏览 器 窗口 大 小 、 设 置 屏幕 对 象 的 尺寸 、 根 据 不 


同 


情况 显示 不 同 的 媒体 文件 等 内 容 。 
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课堂 实录 “e 一 全 
实战 1 一 一 加 入 收藏 夹 


本 实例 讲述 设置 加 入 收藏 夹 的 具体 应 用 ， 具 体操 作 步 骤 如 下 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 9-7 所 示 。 
(2) 打开 代码 视图 ， 在 <body> 和 </body> 之 间 相 应 的 位 置 输 入 以 下 代码 ， 如 图 9-8 所 示 。 


<script type="text/javascript"> 

function addBookmark (title,url) { 

if (window.sidebar) { 
window.sidebar.addPanel (title, url,"™); 

} else if( document.all ) { 
window.external.AddFavorite( url, title); 

} else if( window.opera && window.print ) { 
return true; 

} 

} 


</script> <a href=javascript:addBookmark ("百度 搜索 ','http://www.baidu.com/') > 添 
加 到 收藏 </a> 


CTETE TT 


图 9-7 打开 网 页 文档 图 9-8 输入 代码 
(3) 保存 文档 ， 单 击 “ 添 加 到 收藏 ” 超 链接 ， 弹 出 提示 框 ， 各国 9 所 示 。 


ED We 
Dr 各 “| "|X| 下 上 
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图 9-9 加 入 收藏 
实 状 态 栏 显示 信息 


有 的 时 候 ， 我 们 想 在 状态 栏 上 显示 一 些 自己 很 喜欢 的 内 容 ， 比 如 显示 欢迎 信息 、 当 前 时 间 
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等 ， 都 可 以 用 JavaScript 来 实现 ， 具 体操 作 步 骤 如 下 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 9-10 所 示 。 
(2) 打开 拆 分 视图 ， 在 <head> 和 </head > 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 9-11 所 示 。 


<script language="Javascript"> 


// 设 置 浏览 器 状态 栏 的 默认 值 : 
defaultstatus = "亲爱 的 朋友 您 好 ， 欢 迎 光临 我 们 的 网 站 '7 
</script> 


Wa 


图 9-10 打开 网 页 文档 图 9-11 输入 代码 
(3) 保存 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 9-12 所 示 。 


多 CT 
je ED 


ear ne 
en 


全 lm 


信息 效果 


dd- 
图 9-12 在 浏览 器 状态 栏 显示 


课 后 练习 。 


1. 填空 题 
(1) 提供 了 获取 显示 器 信息 的 功能 ， 显 示 器 信息 的 主要 用 途 是 确定 网 页 在 客户 机 是 所 


能 达到 的 最 大 显示 空间 。 
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(2) 在 进行 Web 开 发 时 ， 通 过 的 属性 来 确定 用 户 浏览 器 版 本 ， 进 而 编写 有 针对 相应 浏 
览 器 版 本 的 代码 。 

(3) 每 个 Plugin 对 象 本 身 都 是 一 个 数组 ， 其 中 包含 的 每 个 元 素 分 别 对 应 于 每 个 该 插件 支持 的 


2. 操作 题 
制作 一 个 显示 器 分 辩 率 检测 ， 如 图 9-13 所 示 。 


ee CIE EIT 


图 9-13 显示 器 分 辩 率 检测 
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第 10 章 
文档 对 象 


本 章 导读 

Document 对 象 又 称 为 文档 
对 象 ， 该 对 象 是 JavaScript 中 最 
重要 的 一 个 对 象 。Document 对 
象 是 window 对 象 中 的 一 个 子 对 
象 ，window 对 象 代表 浏览 器 窗 
口 ， 而 Document 对 象 代表 了 浏 
览 器 窗口 中 的 文档 ， 用 于 描述 
当前 窗口 或 指定 窗口 对 象 的 文 
档 。 它 包含 了 文档 从 <head> 到 </ 
body> 的 内 容 。 


技术 要 点 

@ 文档 对 象 介绍 

@ 文档 对 象 的 使 用 方法 
@ 引用 文档 中 对 象 的 方法 
@ 文档 对 象 的 应 用 

@ 链接 对 象 


JavaScript 网 页 设计 与 网 站 特效 识 尝 实录 “ee_®@ 
实例 展示 


文字 连续 变换 多 种 颜色 效果 


| @ 文档 对 象 概述 
@ 


Document 文 档 对 象 是 JavaScript 中 window 和 frames 对 象 的 一 
个 属性 ， 是 显示 于 窗口 或 框架 内 的 一 个 文档 ， 用 于 描述 当前 窗口 或 指定 窗口 对 象 的 文档 。 它 包含 
了 文档 从 <head> 到 </body> 的 内 容 。 


什 10.1.1 文档 对 象 介绍 

Document 对 象 是 JavaScript 中 使 用 最 多 的 对 象 ， 因 为 Document 对 象 可 以 操作 HTML 文 档 的 内 
容 和 对 象 。Document 对 象 除了 有 大 量 的 方法 和 属性 之 外 ， 还 有 大 量 的 子 对 象 ， 这 些 对 象 可 以 用 来 
控制 HTML 文 档 中 的 图 片 、 超 链接 、 表 单元 素 等 控件 。 

Document 对 象 代表 整个 HTML 文 档 ， 可 用 来 获取 文档 本 身 的 信息 并 访问 页 面 中 的 所 有 元 素 。 

1. Document 对 象 的 属性 

Document 对 象 的 属性 见 表 10-1 所 示 。 

表 10-1 Document 对 象 的 属性 


属 性 说 明 
body 提供 对 <body> 元 素 的 直接 访问 
cookie 设置 或 返回 与 当前 文档 有 关 的 所 有 cookie 
domain 返回 当前 文档 的 域名 
lastModified 返回 文档 被 最 后 修改 的 日 期 和 时 间 
title 返回 当前 文档 的 标题 
URL 返回 当前 文档 的 URL 


下 面 通过 一 个 实例 讲述 Document 对 象 属性 的 使 用 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


> 档 对 过 


<title> 无 标题 文档 </title> 

<acript> 

document .title = "由 JavaScript 脚 本 生成 的 网 页 标题 " 
</script> 

</head> 

<body> 文 档 窗口 的 宽度 是 

<script> 

document .write (document .body .offsetWidth); 
</script> 

</body> 

</html> 


Se 
Hm 


这 里 使 用 document.title 显 示 浏 览 器 标题 ， 使 用 document.write() 输 出 文档 窗口 的 宽度 ， 如 图 
10-1 和 图 10-2 所 示 。 


图 10-1 文档 窗口 的 宽度 是 906 图 10-2 “文档 窗口 的 宽度 是 648 
2. Document 对 象 方法 
Document 对 象 的 方法 见 表 10-2 所 示 。 
表 10-2 ”Document 对 象 的 方法 


rar re ee Rim 


方 法 说 明 
close() 关闭 用 document.open() 方 法 打开 的 输出 流 ， 并 显示 选 定 的 数据 
getElementByld() 返回 对 拥有 指定 id 的 第 一 个 对 象 的 引用 


getElementsByName() 返回 带 有 指定 名 称 的 对 象 集合 


getElementsByTagName() | 返回 带 有 指定 标签 名 的 对 象 集合 

open() 打开 一 个 流 ， 以 收集 来 自任 何 document write() 或 documentwriteln() 方 法 的 输出 
write() 向 文档 写 HTML 表 达 式 或 JavaScript 代 码 

writeln() 等 同 于 write() 方 法 ， 不 同 的 是 在 每 个 表达 式 之 后 写 一 个 换行 符 


下 面 通 过 一 个 实例 来 讲述 Document 对 象 的 使 用 方法 。 
实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 
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<body> 

<script> 

function testl() 

时 

Var txt = document.getElementById("txt 1"); 
window.alert (txt .type); 

Var pwds = document .getElementsByName ("txtUPwd"); 
window.alert (pwds.length); 

window.alert (pwds [1] .id); 

Var eles = document .getElementsByTagName ("input"); 
window.alert (eles.1length); 

window.alert (eles[3] .value); 

} 

</script> 

<form id="frm" method="post"> 

用 户 名 :<input type="text" id="txt 1" name="txtUName" /> 
密码 :<input type="password" id="tzxt 2" name="txtUPwd" /> 
确认 密码 :<input type="password" id="txt 3" name="txtUPwd" /> 
<input type="button" name="btnTest" value=" 测 试 " onclick="testl1();" /> 
</form> 

</body> 

</html> 


在 Document 对 象 中 可 以 使 用 getElementByld : - 
方法 引用 文本 框 中 的 值 ， 它 是 通过 标签 的 ID 来 | | 二 号. 
访问 标签 中 的 值 ， 这 种 方法 不 局 限于 表单 , 访 | |” mw mw” 可 
问 更 方便 、 更 自由 。 运 行 代码 ， 在 浏览 器 中 预 
览 的 效果 如 图 10-3 所 示 。 


-= CE CEE TT 


图 10-3 Document 对 象 的 方法 
3. Document 对 象 集合 
Document 对 象 的 集合 见 表 10-3 所 示 。 
表 10-3 ”Document 对 象 的 集合 
集 合 说 明 
al 提供 对 文档 中 所 有 HTML 元 素 的 访问 
anchors[] 返回 对 文档 中 所 有 Anchor 对 象 的 引用 
applets 返回 对 文档 中 所 有 Applet 对 象 的 引用 
forms[] 返回 对 文档 中 所 有 Form 对 象 的 引用 
返 
返 


images[] 回 对 文档 中 所 有 Image 对 象 的 引用 
links[ 回 对 文档 中 所 有 Area 和 Link 对 象 的 引用 
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国 10.1.2 文档 对 和 象 的 使 用 方法 


Document 对 象 提供 多 种 方式 获得 HTML 元 素 对 象 的 引用 。 对 每 个 HTML 文 件 会 自动 建立 一 个 文 
件 对 象 。Document 对 象 不 需要 手工 创建 ， 在 文档 初始 化 时 就 已 经 由 系统 内 部 创建 ， 直 接 调用 其 方 
法 或 属性 即 可 。 

基本 语法 : 

document .属性 

document .方法 (参数 ) 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<tit1le> 无 标题 文档 </title> 

</head> 

<body> 

<script language="JavaScript"> 

Var whatsNew = open(",' blank','top=50,1left=50,width=200,height=300,' + 
'menubar=no, toolbar=no, directories=no, location=no,' + 
'status=no, resizable=no, scrollbars=yes’); 

whatsNew.document .write ('<center><b> 更 新 通知 </b></center>'); 

whatsNew.document .write ('<p> 最 后 更 新 日 期 2014.08.01'); 

whatsNew.document .write('<p align="right">' + 
'xa href="javascript:self.close()"> 关 闭 窗口 </a>'); 

whatsNew.document .close(); 

</script> 

</body> 

</html> 


| 
Em 


B Ovrom rT Ee Wim rer eriom 


本 实例 先 写 好 一 个 HTML 文件 ， 然 后 再 用 : 
open() 方法 中 直接 load 这 个 文件 ， 运 行 代码 | E 
的 效果 如 图 10-4 所 示 。 和 | 


最 后 更 新 日 莫 ，20140801 


关口 


EN ORT" 


图 10-4 文档 对 象 的 使 用 


上 10.1.3 课堂 小 实例 __ 引 用 文档 中 对 象 的 方法 

Document 对 象 也 就 是 文档 的 对 象 ， 它 是 Windows 对 象 的 子 对 象 ， 它 代表 浏览 器 窗口 中 的 文 
档 。 文 档 与 状态 栏 、 工 具 栏 等 是 并 列 的 ， 它 们 一 起 构成 了 浏览 器 窗口 。 通 过 使 用 Document 对 象 可 
以 对 文档 中 的 对 象 、 内 容 等 进行 访问 ， 其 中 有 些 对 象 或 内 容 还 可 以 使 用 Document 对 象 来 设置 。 
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本 实例 是 取得 用 户 的 提交 信息 ， 然 后 在 | 
弹出 的 窗口 中 显示 出 来 ， 运 行 代码 的 效果 如 图 
10-5 所 示 。 


图 10-5 运行 代码 效果 


对 家 


| @ 文档 对 象 的 应 用 


使 用 Document 对 象 可 以 访问 文档 中 的 对 象 ，Document 对 象 的 
属性 和 方法 比较 多 。 下 面 通过 实例 来 介绍 这 些 属性 和 方法 。 


用 10.2.1 课堂 小 实例 一 一 设 多 置 超 链 接 的 颜色 

在 默认 的 情况 下 ， 未 访问 的 超 链 接 为 蓝 | 原 
色 、 已 访问 过 的 超 链接 和 正在 访问 的 超 链接 为 : 
上 暗 红 色 。 使 用 Document 对 象 的 linkcolor 属 性 、 : 
vlinkcolor 属 性 和 alinkcolor 属 性 可 以 分 别 设置 文 : 
档 超 链接 颜色 。 不 但 可 以 通过 这 些 属性 来 获得 ; 
不 同 状态 下 超 链接 的 颜色 ， 还 可 以 使 用 这 些 属 : 
性 来 设置 不 同 状态 下 超 链 接 的 颜色 。 | 


实例 代码 : 
ee : es PT ET 
document .bgColor = "white"; ! 图 10-6 设置 超 链接 的 颜色 


document .fgColor = "black"; 


document .linkColor = "red"; 


document .alinkColor = "blue"; : 使 linkColor， 设 置 超 链接 的 颜色 。 


document .vlinkColor = "purple"; | 使 alinkColor， 正 在 激活 中 的 超 链接 的 颜色 。 
</Script> i | 全 vlinkColor， 链 接 的 起 链接 颜色 。 
<A href="http://www.linyikongtiao. : 使 links， 以 数组 索引 值 表 示 所 有 超 链 接 。 


EE | | 。 URL 为 该 文件 的 网 址 。 

本 实例 应 用 document.linkColor = “red” | | 傅 anchors， 以 数组 索引 值 表示 所 有 锚 点 。 
设置 超 文本 链接 的 颜色 为 红色 ，document.: | 傅 bgColor， 背景 颜色 。 
alinkColor = “blue” 设 置 正在 访问 的 超 链接 | 使 fgColor， 前 景 颜色 。 
文本 的 颜色 为 蓝 色 ，document.vlinkColor = | 
“purple” 设 置 已 访问 过 的 超 链接 文本 的 颜色 | 
为 粉色 ， 运 行 代 码 的 效果 如 图 10-6 所 示 。 


国 10.2.2 课堂 小 实例 一 一 设置 网 页 背景 颜色 和 默认 文字 颜色 

对 大 多 数 浏览 器 而 言 ， 其 默认 的 背景 颜色 为 白色 或 灰白 色 。 在 网 页 设计 中 ，bgcolor 属 性 用 于 
设置 整个 文档 的 背景 颜色 。 在 HTML 中 的 body 元 素 中 ， 可 以 通过 bgcolor 属 性 和 text 属 性 来 设置 网 页 
背景 颜色 和 默认 的 文字 颜色 。 而 Document 对 象 的 bgcolor 属 性 和 fgcolor 属 性 也 可 以 设置 网 页 背景 
色 和 默认 的 文字 颜色 。 

实例 代码 : 


<!doctype html> 
<html> 


<head> 


<meta charset="utf-8"> 
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<title> 无 标题 文档 </title> 


<script language="javascript"> 


document .bgColor="grenn" ; // 设置 背景 颜色 
document .fgColor="white" // 设置 字体 颜色 
function changeColor() 
{ 
document .bgColor=""; // 设置 背景 颜色 
document .body .text="blue"; // 设置 字体 颜色 
} 
function outColor() 
{ 
document .bgColor="red"; // 设置 背景 颜色 
document .body .text="white"; // 设置 字体 颜色 
} 
</script> 
</head> 
<body> 
<hl align="center" onMouseOver="changeColor()" onMouseOut="outColor()"> 


设置 网 页 背景 颜色 和 默认 文字 颜色 </h1> 
</body> 
</html> 


本 实例 使 用 bgcolor 属 性 和 fgcolor 属 性 来 设置 网 页 背景 颜色 和 默认 的 文字 颜色 ,打开 网 页 时 
默认 的 文本 颜色 和 背景 颜色 。 当 鼠标 移 开 文字 时 ， 


10-8 所 示 


[Gem 


字体 颜色 和 背景 颜色 就 会 改变 ， 如 图 10-7 和 图 


— mn ET 


图 10-7 默认 字体 颜色 和 背景 颜色 


10.2.3 


图 10-8 设置 字体 颜色 和 背景 颜色 


课堂 小 实例 一 一 文档 信息 


Document 对 象 中 的 lastmodified 属 性 可 以 显示 文档 的 信息 。 在 JavaScript 中 ， 为 Document 对 


象 定义 了 lastModified 属 性 ， 使 


该 属性 可 以 得 到 当前 文档 最 后 
地 计算 机 上 的 每 个 文件 都 有 最 后 修改 的 时 间 ， 所 以 在 


次 被 修改 的 具体 日 期 和 时 间 。 本 
肛 务 器 上 的 文档 也 有 最 后 修改 的 时 间 。 当 客 


户 端 能 够 访问 服务 器 端的 该 文档 时 ， 客 户 端 就 可 以 使 


时 间 。 
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lastModified 属 性 来 得 到 该 文档 的 最 后 修改 


实例 代码 : 


本 实例 运用 document 对 象 来 显示 文档 的 最 | 
后 修改 时 间 ， 如 图 10-9 所 示 。 : 


[1 Te 二。 有 00W 


图 10-9 文档 的 最 后 修改 时 间 


国 10.2.4 课堂 小 实例 一 一 在 网 页 中 输出 内 容 一 一 一 一 一 一 


使 用 Document 对 象 的 write() 方 法 和 : ia 
writeln() 方 法 可 以 输出 文档 内 容 。 | | | 


运行 代码 即 可 输出 网 页 中 的 内 容 ， 各 图 | 
10-10 所 示 。 


A A 


图 10-10 输出 网 页 内 容 
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document.write() 和 document.writeln() 有 什么 区 别 ? 
两 者 都 是 JavaScript 向 客户 菩 输 出 的 方法 。 对 比 可 知 ， 写 法 上 的 差别 是 一 个 ln--line 的 简写 ， 摘 言 
之 ，writeln 方 法 是 以 行 输出 的 ， 相 当 于 在 write 输 出 后 加 上 一 个 换行 符 。 


国 10.2.5 课堂 小 实例 一 一 文档 定位 


文档 定位 就 是 设置 和 获取 文档 的 位 置 ， 文 档 的 位 置 也 可 以 说 是 文档 的 URL。 在 JavaScript 中 ， 


为 Document 对 象 定义 了 location、URL、referrer 这 3 个 属性 来 对 文档 的 位 置 进行 操作 。 


location 属 性 和 URL 属 性 很 相似 ， 它 们 都 具有 获取 文档 位 置 的 功能 。 
从 运行 结果 中 可 以 看 出 ， 使 用 location 属 性 和 URL 属 性 都 可 以 得 到 文档 的 位 置 。 但 是 它们 的 表 


示 形 式 不 同 ， 使 用 URL 属 性 得 到 的 是 真实 显示 的 URL， 而 location 属 性 得 到 的 URL 中 将 空格 等 特殊 
字符 转换 成 码 值 的 形式 来 显示 ， 这 样 更 容易 在 网 络 中 传输 。 


location 属 性 重新 设置 了 URL， 在 页 面 中 出 现 了 ; | 


文档 中 的 URL， 如 图 10-11 所 示 。 | | xs 8 
| | 使 用 location 居 性 得 到 的 CURL 为 file:/WD:JavaScript 网 页 程序 开发 与 案例 课堂 实录 / 效 
! | A002 html 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<tit1le> 无 标题 文档 </title> 

</head> 

<body> 

<h3> 文 档 定位 </h3> 

<script language="javascript" type="text/javascript"> 
二 

Var sstring = document.location; 

document .write ("<h3> 使 用 location 属 性 得 到 的 URIL 为 : ") ; 
document .write(sstring); 

Ws 

</script> 

</body> 

</html> 


使 用 浏览 器 运行 程序 ， 由 于 程序 中 使 用 | 


! | 号 | iv sam > | 


图 10-11 文档 定位 


用 10.2.6 

在 JavaScript 中 ， 为 Document 对 象 定义 了 : 
title 属性 来 获得 文档 的 标题 。 在 HTML 文 件 中 title ; 
标记 对 中 的 内 容 就 是 文档 的 标题 。tite 标 记 可 以 | 
省 略 ， 但 是 文档 的 标题 仍然 存在 ， 只 是 为 空 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 
<title> 空 调 维修 移 机 </title> 
</head> 

<body> 

该 文档 标题 是 : 

<script type="text/javascript"> 
document .write (document .title) 
</script> 

</body> 

</html> 


肯 10.2.7 

在 JavaScript 中 ， 为 Document 对 象 定 义 了 : 
open 方 法 和 close 方 法 ， 它 们 分 别 用 来 打开 和 关 | 
闭 文档 ， 打 开 文 档 与 打开 窗口 不 同 ， 打 开 窗口 ; 
将 要 在 窗口 和 浏览 器 中 创建 一 个 对 象 ， 而 打开 | 


文档 只 要 向 文档 写 入 内 容 ， 打 开 文 档 要 比 打开 : 
窗口 节省 很 多 资源 。 

使 用 open 方 法 来 打开 一 个 文档 ， 原 来 的 文 | 
档 内 容 就 会 被 自动 删除 ， 然 后 重新 开始 输入 新 | 


内 容 。 使 用 close 方 法 来 关闭 一 个 文档 ， 在 输入 
新 内 容 结束 后 ， 如 果 不 关闭 文档 ， 就 有 可 能 造 | 
成 文档 无 法 显示 。 : 

下 面 通过 实例 来 讲解 打开 一 个 新 的 文档 、 
添加 一 些 文本 、 然 后 关闭 它 的 操作 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<script type="text/javascript"> 


: Be Wo maemo 


上 | 涝 


:html” 
| close() 关 闭 文档 ， 在 浏览 器 运行 程序 ， 如 
: 10-13 和 10-14 所 示 。 


@_。 第 1( 章 BEE 
课堂 小 实例 一 一 文档 标题 


使 用 代码 document.write(document.title) 
输出 文档 的 标题 ， 使 用 浏览 器 运行 程序 ， 如 
10-12 所 示 。 


rr DEL 本 
EM TaN IRM SW 


法 六 桂 本 知县 ， 宇 本 维 从 和 机 


HEN | foe 


文档 的 标题 


图 10-12 


课堂 小 实例 打开 和 关闭 文档 


function createNewDoc () 
{ 


var newDoc=document .open ("text/ 


1 html","replace"); 


var txt="<html><body> 欢 迎 进 入 


: JavaScript 学 习 教程 ! </body></html>"; 


newDoc .write (txt) 
newDoc .close (); 
} 
</script> 
</head> 
<body> 
<input type="button" value=" 打 开 一 个 


: 新 文档 " onclick="createNewDoc ()"> 


</body> 
</html> 


使 用 代码 document.open(“text/ 
,“replace”) 打 开 文档 ， 使 用 newDoc. 


图 
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SA 


FE 


2 FE 


图 10-13 ”打开 文档 前 


10. 


图 10-14 ”打开 文档 后 


链接 对 象 o 


Document 对 象 的 links 属 性 可 以 返回 一 个 数组 ， 该 数组 中 的 每 


一 个 元 素 都 是 一 个 link 对 象 ， 也 称 为 链接 对 象 。 可 以 用 links 数 组 来 访问 多 个 link 对 象 。 每 个 数组 的 成 
员 是 一 个 当前 页 面 的 link 对 象 。 每 个 link 对 象 〈 或 links 数 组 的 成 员 ) 都 有 一 些 定义 了 地 址 的 属性 。 


从 10.3.1 链接 对 象 的 介绍 
iink() 方 法 ) 
个 链接 文档 之 间 的 关系 。 


基本 语法 : | 


string.link (url); 


Url， 链 接地 址 ，string 类 型 的 字符 串 。 

下 面 通过 实例 讲述 使 用 link() 把 字符 串 显示 | 
为 超 链 接 。 | 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 链 接 对 象 </title> 

</head> 

<body> 

<script type="text/javascript"> 


var str=" 百 度 网 " 


document .writel(str.1link("http:// | 


.baidu.com")) 
</script> 
</body> 
</html> 


把 字符 串 显 示 为 超 链接 。Link 对 象 代表 某 个 HTML 的 link 元 素 。 
link 元 素 被 定义 于 HTML 文 档 的 head 部 分 。 


畏 [ETED | 


link 元 素 可 定义 两 


运行 代码 后 ， 可 以 看 到 给 文字 添加 了 链 


， 如 图 10-15 所 示 。 


rr |X | 和 


ZN WE FEV RA IAT wo | 


| 

区 二 天 了 | 
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| 


EE 
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图 10-15 ”把 字符 串 显示 为 超 链接 


@-。” 第 10 章 
人 10.3.2 课堂 小 实例 一 一 感知 鼠标 移动 事件 


JavaScript 的 onmousemove 事 件 类 型 是 一 个 实时 响应 的 事件 ， 当 鼠标 指针 的 位 置 发 生变 化 时 
(至 少 移动 1 个 像素 ) ， 就 会 触发 onmousemove 事 件 。 该 事件 响应 的 灵敏 度 主 要 参考 鼠标 指针 移 
动 速 度 的 快慢 ， 以 及 浏览 器 跟踪 更 新 的 速度 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<a href="#" title=" 链 接 目标 页 ”onmousemove="alert (this.title)" 
onmouseout="alert (' 和 鼠标 离开 ') "> 感知 鼠标 移动 事件 </a> 

</body> 

</html> 


本 实例 使 用 onmousemove 和 onmouseout 感 知 鼠 标 移动 事件 。 运 行 代码 ， 当 鼠标 经 过 时 如 图 
10-16 所 示 ， 当 鼠标 离开 时 如 图 10-17 所 示 。 


[ein Wn on om rm oe Se 
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图 10-16 息 标 经 过 时 图 10-17 ”和 饼 标 离开 时 


] @ 脚本 化 cookie o 


cookie 是 浏览 器 提供 的 一 种 机 制 ， 它 将 Document 对 象 的 
cookie 属 性 提供 给 JavaScript。 可 以 由 JavaScript 对 其 进行 控制 ， 而 并 不 是 JavaScript 本 身 的 性 质 。 


肯 10.4.1 cookie 介绍 

cookie 也 称 为 cookies， 是 一 种 允许 服务 器 : 定 的 数据 结构 ， 以 小 文本 文件 的 形式 存储 至 客 
将 部 分 信息 存储 至 客户 端 硬盘 或 内 存 ， 同 时 人 允 : 户 端的 硬盘 中 。 这 些 写 入 客户 端 硬盘 的 小 文本 
许 直接 从 客户 端 硬盘 直接 读 取 数 据 的 一 种 数据 : 文件 就 是 当前 Web 服 务 器 的 cookie 信 息 ， 同 时 
转 存 技术 。 当 用 户 浏览 网 页 或 者 使 用 基于 B/S : cookie 中 还 可 以 包含 浏览 网 页 的 记录 、 网 页 停 
的 系统 时 ，Web 服 务 器 将 一 部 分 信息 (如 用 户 : 留 时 间 、 最 后 访问 时 间 等 详细 信息 。 当 用 户 再 


名 、 密 码 、 用 户 所 属 部 门 等 基本 信息 ) 按照 特 | 次 访问 Web 服 务 器 时 ， 通 过 读 取 之 前 写 入 客户 
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端的 cookie 信 息 ， 即 可 获取 当前 用 户 的 各 种 信 
息 ， 从 而 实现 诸如 自动 登录 的 功能 。 


cookie 
径 、 失 效 日 期 及 安全 标志 组 成 。 其 中 cookie 的 


名 称 是 不 区 分 大 小 写 的 ，cookie 的 失效 日 期 指 | 


定 了 cookie 被 删除 的 时 间 ， 安 全 标志 用 于 指定 
肯 10.4.2 cookie 的 优点 和 缺点 


cookie 机 制 将 信息 存储 于 用 户 硬 盘 ， 因 此 | 


可 以 作为 全 局 变量 ， 这 是 它 最 大 的 一 个 优点 。 
它 可 以 用 于 以 下 几 种 场合 。 

(1) 保存 用 户 登录 状态 。 例 如 将 用 
储 于 一 个 cookie 内 ， 这 样 当 上 


置 过 期 时 间 ， 当 超过 该 时 间 期 限 后 ，cookie 就 


会 自动 消失 。 因 此 ， 系 统 往往 可 以 提示 用 户 保 ; 
持 登 录 状态 的 时 间 : 常见 选项 有 一 个 月 、 三 个 | 
月 、 一 年 等 。 

(2) 跟踪 用 户 行为 。 例 如 天 气 预报 网 | 


站 ， 能 够 根据 用 户 选择 的 地 区 显示 当地 的 天 气 ; 


情况 。 如 果 每 次 都 需要 选择 所 在 地 就 很 烦琐 ， 
当 利 用 了 cookie 


页 面 时 ， 


起 来 非常 方便 。 


(3) 定制 页 面 。 如 果 网 站 提供 了 换 肤 或 更 | 


唯一 标识 的 名 称 、 值 、 域 、 路 ; 


户 id 存 | 
户 下 次 访问 该 页 | 
面 时 就 不 需要 重新 登录 了 ， 现 在 很 多 网 站 的 论 | 
坛 和 社区 都 提供 这 样 的 功能 。cookie 还 可 以 设 | 


后 就 会 显得 很 人 性 化 了 ， 系 统 | 
能 够 记 住 上 一 次 访问 的 地 区 ， 当 下 次 再 打开 该 ; 
它 就 会 自动 显示 用 户 上 次 所 在 地 区 的 | 
天 气 情况 。 因 为 一 切 都 是 在 后 合 完成 ， 所 以 这 | 
样 的 页 面 就 像 为 某 个 用 户 所 定制 的 一 样 ， 使 用 ; 


JavaScript 网 页 设计 与 网 站 特效 aA 堂 实 录 “ee _®@ 


; 此 cookie 信 息 是 否 只 能 被 安全 网 站 访问 。 

cookie 信 息 一 般 存 储 在 当前 登录 用 户 所 在 
文件 夹 下 ，cookie 信 息 以 单个 文件 形式 存在 ， 
; Cookie 文 件 一 般 以 “cookie: ”开头 ， 其 次 是 
”当前 登录 的 用 户 名 ， 然 后 是 @ 符 号 ， 最 后 是 写 
: cookie 信 息 的 Web 服 务 器 地 址 。 


换 布局 的 功能 ， 那 么 可 以 使 用 cookie 来 记录 用 户 
| 的 选项 ， 例 如 背景 色 、 分 辩 率 等 。 当 用 户 下 次 访 
i 问 时 ， 仍 然 可 以 保存 上 一 次 访问 的 界面 风格 。 
(4) 创建 购物 车 。 使 用 cookie 来 记录 用 户 
需要 购买 的 商品 ， 在 结账 的 时 候 可 以 统一 提交 。 
当然 ， 上 述 应 用 仅仅 是 cookie 所 能 完成 
的 部 分 应 用 ， 还 有 更 多 的 功能 需要 全 局 变量 。 
: cookie 的 缺点 主要 集中 于 安全 性 和 隐私 保护 方 
面 。 主 要 包括 以 下 几 项 内 容 。 
| (1) cookie 可 能 被 禁用 。 当 用 户 非常 注重 
| 个 人 隐私 保护 时 ， 它 很 可 能 禁用 浏览 器 的 cookie 
功能 。 
| (2) cookie 是 与 浏览 器 相关 的 。 这 意味 着 
| 即使 访问 的 是 同一 个 页 面 ， 不 同 浏览 器 之 间 所 
保存 的 cookie 也 是 不 能 互相 访问 的 。 
(3) cookie 可 能 被 删除 。 因 为 每 个 cookie 
都 是 硬盘 上 的 一 个 文件 ， 因 此 很 有 可 能 被 用 户 删除 。 
(4) cookie 安 全 性 不 够 高 。 所 有 的 cookie 
都 是 以 纯 文本 的 形式 记录 于 文件 中 ， 因 此 如 果 
; 要 保存 用 户 名 密码 等 信息 时 ， 最 好 事先 对 其 进 
行 加 密 处 理 。 


肛 10.4.3 ”检测 浏览 器 是 否 支持 cookie 功 能 


cookie 虽 然 有 那么 多 好 处 ， 但 是 在 使 用 前 ， 网 页 开发 者 首先 必须 检查 一 下 | 


户 的 浏览 器 是 否 


支持 cookie， 和 否则 的 话 就 会 导致 许多 错误 信息 的 出 现 。 


实例 代码 : 


<script language="javascript"> 
if (navigator.cookieEnabled) 
四 


document .write ("你 的 浏览 器 支持 cookie 功 能 ") 


}elsel{ 


document .write ("你 的 浏览 器 不 支持 cookie") ; 


} 
</acript> 
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上 10.4.4 创建 cookie 


在 JavaScript 中 ， 创 建 cookie 是 通过 设置 | 实例 代码 : 
cookie 的 键 和 值 的 方式 来 完成 的 。 一 个 网 站 中 | <script language="JavaScript" > 
cookie 一 般 不 是 唯一 的 ， 可 以 有 多 个 ， 而 且 这 | re 
些 不 同 的 cookie 还 可 以 拥有 不 同 的 值 。 如 要 存 : document .cookie="userId=88"; 
放 用 户 名 和 密码 则 可 以 用 两 个 cookie， 一 个 用 : document .cookie="userName=make"; 
于 存放 用 户 名 ， 另 一 个 用 于 存放 密码 。 然 后 再 : Var strCookie=document .cookie; 
使 用 Document 对 象 的 cookie 属 性 来 设置 和 读 取 : alert (strCookie); 
cookie。 WE 


创建 cookie 并 读 取 该 域 下 所 有 cookie 值 。 : </script> 
| ”用 上 述 方法 无 法 获得 某 个 具体 的 cookie 
| 值 ， 所 得 到 的 是 当前 域名 下 的 所 有 cookie。 


虽 10.4.5 ”cookie 的 生存 期 

在 默认 情况 下 ，cookie 是 临时 存在 的 。 在 一 个 浏览 器 窗口 打开 时 ， 可 以 设置 cookie， 只 要 该 浏 
览 器 窗口 没有 关闭 ，cookie 就 一 直 有 效 ， 而 一 旦 浏览 器 窗口 关闭 后 ，cookie 也 就 随 之 消失 。 

如 果 想 要 cookie 在 浏览 器 窗口 关闭 之 后 还 能 继续 使 用 ， 就 需要 为 cookie 设 置 一 个 生存 期 。 所 谓 
生存 期 也 就 是 cookie 的 终止 日 期 ， 在 这 个 终止 日 期 到 达 之 前 ， 浏 览 器 随时 都 可 以 读 取 该 cookie。 一 
旦 终止 日 期 到 达 之 后 ， 该 cookie 将 会 从 cookie 文 件 中 删除 。 

要 将 cookie 设 置 为 10 天 后 过 期 ， 可 以 这 样 实现 : 

实例 代码 : 


<script language="JavaSscript" type="text/javascript"> 


<!-- 

// 获 取 当 前 时 间 

Var date=new Date () 7 

Var expiresDays=10; 

// 将 date 设 置 为 10 天 以 后 的 时 间 

date.setTime (date.getTime () +expiresDays*24*3600*1000); 

// 将 userId 和 userName 两 个 cookie 设 置 为 10 天 后 过 期 

document .cookie="userId=88; userName=make; expires="+date.toGMTString(); 
Wi 

</script> 


在 网 页 中 的 超 链接 文字 都 具有 一 成 不 变 的 颜色 ,设置 后 无 法 改 
变 ， 以 下 的 脚本 就 是 让 超 链 接 文字 连续 变换 多 种 颜色 ， 有 点 像 霓虹灯 的 效果 ， 具 体操 作 步 骤 
如 下 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 10-18 所 示 。 
(2) 打开 拆 分 视图 ， 在 <body> 和 </body> 之 间 相 应 的 位 置 输 入 以 下 代码 ， 如 图 10-19 所 示 。 
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<a href="#"> 首 页 | 公司 简介 | 公司 新 闻 

</a> 

<script language="JavaScript"> 

function initArray() { 

Eor (va = 03 

i < initArray.arguments.1length; 

i++) 

this[i] = initArray.arguments[i]; 

} 

this.length = initArray.arguments.1length; 
: 

Var colors = new initArray( "#000000","#0000FF", "#80FFFF", "#80FF80", 
"#FFFFOO", "#FF8000", "#FFOOFF", "#FF0000" ); 


delay = 100 
link = 0; 
vlink = 0; 


function linkDance() { 

link = (link+1)%colors.length; 

vlink = (vlink+1)%colors.length; 
document .linkColor = colors[link]; 
document .vlinkColor = colors[vlink]; 
setTimeout ("linkDance ()", delay); 

} 

linkDance (); 

</script> 

</div> 


DW mn me Rw A Pe Wi) ole ee WW et EE] 
CI WT 


Lb 


ond 


图 10-18 打开 网 页 文档 图 10-19 输入 代码 
(3) 保存 文档 ， 在 浏览 器 中 浏览 效果 ， 如 图 10-20 所 示 。 


加 
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图 10-20 文字 连续 变换 多 种 颜色 


效果 


@ 


1. 填空 题 
(1) Document 文 档 对 象 是 JavaScript 中 和 
窗口 或 框架 内 的 一 个 文档 。 


”对象 的 一 个 属性 ， 是 显示 于 


(2) Document 对 象 是 JavaScript 中 使 用 最 多 的 对 象 ， 


为 Document 对 象 可 以 操作 html 文 档 


的 内 容 和 对 象 。Document 对 象 除了 有 大 量 的 方法 和 属性 之 外 ， 还 有 大 量 的 子 对 象 ， 这 些 对象 可 以 
来 控制 html 文 档 中 的 、~ 、， 等 控件 。 
(3) 使 用 Document 对 象 的  、， 和 可 以 分 别 设置 文档 超 链接 颜 
色 。 
2. 操作 题 


制作 一 个 用 鼠标 改变 链接 背景 色 的 效果 ， 如 图 10-21 所 示 。 


图 10-21 改变 背景 色 
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第 11 章 
历史 对 象 和 地 址 对 象 


本 章 导 读 

JavaScript 的 History 对 象 记 
录 了 用 户 曾经 浏览 过 的 页 面 ， 并 
可 以 实现 与 浏览 器 前 进 与 后 退 相 
似 的 导航 功能 。 可 以 通过 back 函 
数 实现 后 退 一 个 页 面 ，forward 
函数 实现 前 进 一 个 页 面 ， 或 者 使 
用 go 函数 实现 任意 后 退 或 前 进 页 
面 ， 还 可 以 通过 length 属 性 来 查 
看 history 对 象 中 存储 的 页 面 数 。 


技术 要 点 

@ 历史 对 象 的 介绍 

@ 前 进 到 上 一 页 和 后 退 到 下 一 页 
@ 跳 转 

@ 地 址 对 象 


@-e 第 11 章 ET 
实例 展示 


用 户 登 录 


| 古本 


JavaScript 中 的 History 历 史 对 象 包含 的 用 户 已 浏览 的 URL 的 信 
息 ， 是 指 浏览 器 的 浏览 历史 。 


国 11.1.1 历史 对 象 的 介绍 一 
History 在 JavaScript 中 是 用 来 后 退 的 ， 基 本 写法 history.back() 是 常用 的 写法 。 
History 对 象 是 window 对 象 的 属性 ，History 对 象 没有 事件 ， 但 有 4 个 属性 ， 如 下 所 示 : 

current， 窗 口中 当前 所 显示 文档 的 URL 。 

length， 表 示 历 史 表 的 长 度 。 

next， 表 示 历 史 表 中 的 下 一 个 URL。 

PROVIOUS ， 表 示 历 史 表 中 的 上 一 个 URL 。 
History 对 象 提 供 了 3 个 方法 来 访问 历史 列表 : 

@ history.back()， 载 和 历史 列表 中 前 一 个 网 址 ， 相 当 于 按 下 “后 退 ” 按 钮 。 

@ history.forward()， 载 人 历史 列表 中 后 一 个 网 址 ，〈 如 果 有 的 话 ) 相当 于 按 下 “前 进 ” 按 钮 。 

@ history.go()， 打 开 历史 列表 中 一 个 网 址 。 要 使 用 这 个 方法 ， 必 须 在 括号 内 指定 一 个 正 数 或 负数 。 例 
如 ，history .go (-2) 相当 于 按 两 次 “后 退 ” 按 钮 。 


国 11.1.2 课堂 小 实例 一 一 前 进 到 上 一 页 和 后 退 到 下 一 页 一 一 一 0 

History 对 象 可 以 实现 网 页 上 的 前 进 和 后 退 效果 ， 有 forward() 和 back() 两 种 方法 。forward() 
方法 可 以 前 进 到 下 一 个 访问 过 的 URL， 该 方法 和 单 击 浏览 器 中 的 “前 进 ” 按 钮 的 结果 是 一 样 的 。 
back() 方 法 可 以 返回 到 上 一 个 访问 过 的 URL， 调 用 该 方法 与 单 击 浏览 器 中 的 “后 退 ” 按 钮 的 结果 是 
一 样 的 。 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<form name="buttonbar"> 

<input type="button" value=" 上 一 页 " onClick="history.back()"> 
<input type="button" value=" 下 一 页 " onCLick="history.forward()"> 
</form> 

<a href="shang.html"><1i> 上 一 页 

<a href="xia.html"><1i> 下 一 页 

</body> 

</html> 


a P| 


运行 代码 的 效果 如 图 11-1 所 示 。 
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图 11-1 前 进 到 上 一 页 和 后 退 到 下 一 页 


用 11.1.3 ”课堂 小 实例 一 一 跳 转 

使 用 go() 方 法 可 以 在 用 户 的 历史 记录 中 任意 跳 转 ， 可 以 向 后 也 可 以 向 前 跳 转 。 这 个 方法 接受 一 
个 参数 ， 表 示 向 后 或 向 前 跳 转 的 页 面 数 的 一 个 整数 值 。 负 数 表示 向 后 跳 转 类似 于 单 击 浏览 嚣 中 
的 “后 退 ” 按 钮 ) ， 正 数 表示 向 前 跳 转 (类 似 于 单 击 浏览 器 中 的 “前 进 ” 按 钮 ) 。 


实例 代码 : 

<script language="javascript"> // 程序 开始 
var scnds = 7 // 7 秒 

function Go() // 处 理 定时 器 事件 


{ 
if( --scnds == 0 ) window.location.href="http://www.baidu.com"; // 时 间 到 时 跳 转 


else INEO.innerHTML=" 浏 览 器 将 在 " + scnds + "后 跳 转 到 百度 首页 ”; // 输出 提示 


} 
setInterval ("Go ()",1000); // 设置 定时 器 
</script><label id="INFO"/> <!-- 信 息 标签 --> 
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本 实例 在 7 秒 


六 RE 。 大 DYavaScipt 同 各 FS 汪 时 


浏览 器 将 在 7 后 跌 转 到 百度 妾 页 


忆 于 | 区 半 7 lo0% 


图 11-2 跳 转 


国 11.1.4 课堂 小 实例 一 一 创建 返回 或 前 进 到 数 页 前 页 面 的 按钮 
history go(n)， 在 历史 的 范围 内 去 到 指定 的 一 个 地 址 。 如 果 n<0， 则 后 退 n 个 地 址 ， 如 果 n>0， 
则 前 进 n 个 地 址 ， 如 果 n=0， 则 刷新 现在 打开 的 网 页 。 
基本 语法 : 


onClick="history.go(n) 


使 用 该 脚本 语言 创建 一 个 按钮 ， 可 以 前 进 或 返回 到 数 页 前 的 页 面 。 
实例 代码 : 


<!doctype html> 
<html> 


<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

创建 返回 或 前 进 到 数 页 前 页 面 的 按钮 

<p> 

<form> 

<input type='"button" value="” 返回 到 第 3 页 " onclick="history.go(-3)"> 
<input type='"button" value='" 返回 到 第 2 页 " onclick="history.go(-2)"> 
<input type="button"” value='" 前 进 至 第 2 页 " onClick="history.go(2)"> 
<input type="button"” value='" 前 进 至 第 3 页 " onCclick="history.go (3) "> 
</form> 

</p> 

</body> 

</html> 


单 击 不 同 的 按钮 ， 将 调用 onClick 事 件 指 定 的 history.go(n) 方 法 ， 跳 转 到 指定 数量 n 的 页 面 中 ， 
如 图 11-3 所 示 。 
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JavaScript 网 页 设计 与 网 站 特效 因 让 荆 相 二 


让 | 页 新 而 约 按 和 


| [ 肌 斌 测 元 ] ER 


图 1 


1 1. 


表示 当前 窗口 的 地 址 ， 只 需要 使 
对 象 >.location”。 


叶 11.2.1 ”URL 介绍 


1-3 返回 或 前 进 到 数 页 前 页 面 的 按钮 


地 址 对 象 


Location 地 址 对 象 描述 的 是 某 一 个 窗口 对 象 所 打开 的 地 址 。 要 


location 就 行 了 ， 若 要 表示 某 一 个 窗口 的 地 址 ， 就 要 使 


“< 窗口 


URL(Uniform Resource Locator) 指 统一 资 ; @ “协议 ”是 URL 的 起 始 部 分 ， 直 到 包含 到 第 一 
源 定位 器 ， 可 以 把 它 想 像 成 文件 名 的 网 络 扩展 。 } 个 冒号 。 


通过 URL， 不 但 可 以 指出 在 目录 下 的 文件 | @ “主机 ”描述 了 主机 和 域名 ， 或 者 一 个 网 络 主 


名 ， 并 且 可 以 指出 在 网 络 上 的 哪 一 


的 文件 。 这 个 文件 可 以 通过 各 种 不 同 的 方式 得 到 。 ”| 外 “端口 ”描述 了 服务 器 用 于 通讯 的 通讯 谢 


合 机 器 目录 下 ; 。 机 的 地 址 。 


URL 相 当 于 一 个 文件 名 在 网 络 范围 的 扩 ;全 路 和 名 称 扩 本 了 的 唱和 方面 的 信息 。 


可 访问 对 象 的 一 个 指针 。 


通常 情况 下 ， 一 个 URL 会 有 下 面 的 格式 : 协 | 


议 /主机 :端口 /路 径 名 称 因 全 希 标识 ? 


展 。 因 此 URL 是 与 因特网 相连 的 机 器 上 的 任何 | 全“ 下 下 下 识 ” 捕 过 了 中 的 本 各 生生 拓 


希 掩 码 (#)。 此 属性 只 应 用 于 HTTP 协 议 下 的 
URL 。 

| @ “搜索 条 件 ”描述 了 该 URL 中 的 任何 查 鹿 信 

搜索 条 件 。 ; 。 息 , 包括 问号 。 此 属性 只 应 用 于 HTTP 协 议 下 


例如 : http/Wwwwbaidulliaochengiindexhtml# ， 的 URL , “搜索 条 件 ”字符 串 包含 变量 和 值 的 


topic1?x=5&y=7， 这 些 内 容 是 满足 下 列 需求 的 : 


都 是 用 来 引用 当前 文档 的 URL 的 各 个 部 分 。Location 对 象 中 包含 了 有 关 URL 的 信息 。 


基本 语法 ， 
location.href 
location.protocol 
location.pathname 
location.hostname 


location.host 


配对 ， 每 个 配对 之 间 由 一 个 “& ”连接 。 


国 11.2.2 ”课堂 小 实例 一 一 获取 当前 页 面 的 URL 


在 网 页 编程 中 ， 经 常会 遇 到 地 址 的 处 理 问题 ， 这 些 都 与 地 址 本 身 的 属性 有 关 ， 这 些 属性 大 多 
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href 属 性 设置 URL 的 整体 值 ，protocol 属 性 设置 URL 内 的 http 及 ftp 等 协议 类 型 的 值 ，hostname 
属性 设置 URL 内 的 主机 名 称 的 值 ，pathname 属 性 设置 URL 内 的 路 径 名 称 的 值 ，host 属 性 设置 主机 
名 称 及 端口 号 的 值 。 

实例 代码 : 


本 实例 通过 .location 获 得 当前 的 URL 信 息 ， 运 行 代码 的 效果 如 图 11-4 和 图 11-5 所 示 。 


DavasariPk 同 人 序 于 二 进 || 用 no 2 
恬 ZEEEETEOETO 
了 时 
背 短 名，DTaaSaip 同 页 程序 开发 与 案 负 课室 实录 效果 11111 2 2lunl 
整个 地 址 ， 人 ie;IDYTasascripf 页 程序 开 沉 与 地 例 果 学 实录 以 果 /111112 2aml 
me 到 bl: 采用 柱 - 考 1006 ~ 


图 11-4 获取 指定 地 址 的 各 属性 值 i py 


161 


课堂 实录 “e 一 他 
人 性 11.2.3 ”课堂 小 实例 一 一 加 载 新 网 页 


Location 对 象 的 属性 不 是 只 读 属 性 ， 还 可 以 为 location 对 象 的 属性 赋值 。Location 对 象 的 href 
属性 返回 值 为 当前 URL， 如 果 该 属性 值 设置 为 新 的 URL， 那 么 浏览 器 会 自动 加 载 该 URL 的 内 容 。 
如 果 修改 了 Location 对 象 的 其 他 属性 ， 浏 览 器 也 会 自动 更 新 URL， 并 显示 新 的 URL 内 容 。 

实例 代码 : 


<!doctype html> 
<html> 


<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<script language="javascript"> 

function gotoUrl() 

和 

window.location.href="http://www.baidu.com";  // 前 往 指 定 的 页 面 
} 

</script> 

</head> 

<body> 

<input type="submit"” name="Submit"” value=" 单 击 进入 百度 " onClick="gotoUrl ()”/> 
</body> 

</html> 


单 击 进入 百度 ”按钮 即 可 进入 到 指定 的 加 载 页 面 中 ， 运 行 代码 的 效果 如 图 11-6 和 图 11-7 所 示 。 
天 Xindow Internet Erplorer 四 器 一 一 | 

?wu DAavascript 网 页 吕 序 开 生 过 “| 妙 | xs sr 中 > 
到 es 9 CE 


EE 
| 8 
| Bai 必 下 
IC 
| 
图 | 8 EE TE Gs i 
图 11-6 单 击 按钮 图 11-7 进入 百度 网 


用 11.2.4 ”课堂 小 实例 一 一 获取 参数 

search 属 性 是 一 个 可 读 、 可 写 的 字符 串 ， 可 设置 或 返回 当前 URL 的 查询 部 分 (问号 ?之 后 的 部 
分 ) 。 通 过 Location 对 象 的 Search 属 性 ， 可 以 获得 从 URL 中 传递 来 的 参数 和 参数 值 。 

实例 代码 : 


<!ldoctype html> 


<html> 
<head> 


162 


运行 代码 的 效果 如 图 11-8 所 示 。 


图 11-8 刷新 文档 


课堂 实录 *e 一 @ 
肯 11.2.5 ”重新 装载 当前 文档 


Location 对 象 的 reload() 方 法 可 以 重新 装载 当前 文档 ，replace() 可 以 装载 一 个 新 文档 而 无 须 为 它 
创建 一 个 新 的 历史 记录 。 如 果 该 方法 没有 规定 参数 ， 或 者 参数 是 false， 它 就 会 用 HTTP 头 fFModified- 
Since 来 检测 服务 器 上 的 文档 是 否 已 改变 。 如 果 文档 已 改变 ，reload() 会 再 次 下 载 该 文档 。 如 果 文档 未 
改变 ， 则 该 方法 将 从 缓存 中 装载 文档 。 这 与 用 户 单 击 浏览 器 中 的 “刷新 ”按钮 的 效果 是 完全 一 样 的 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<script type="text/javascript"> 
function setReload(){ 
window.location.reload(); 


EF 


</script> 
</head> 
<body> 
<button onclick="setReload() "> 刷新 页 面 </button> 
</body> 
</html> 
本 实例 单 击 “ 刷 新 页 面 ”按钮 即 可 成 功 刷 eo 
新 页 面 ， 运 行 代码 的 效果 如 图 11-9 所 示 。 | [ee = 
图 [CE 
图 11-9 刷新 文档 


国 11.2.6 课堂 小 实例 一 一 加 载 新 文档 

Location 对 象 的 replace() 方 法 可 用 一 个 新 文档 取代 当前 文档 以 达到 加 载 新 文档 的 目的 。 
replace() 方 法 的 参数 可 以 是 函数 而 不 是 字符 串 。 在 这 种 情况 下 ， 每 个 匹配 都 调用 该 函数 ， 它 返 
的 字符 趾 将 作为 替换 文本 使 用 ， 该 函数 的 第 一 个 参数 是 匹配 模式 的 字符 串 。 


回 


location.replace() 与 location.reload() 有 什么 区 别 ? 
location.reload() 方 法 用 于 刷新 当前 页 面 ， 如 果 有 POST 数 据 提交 ， 则 会 重新 提交 数据 ; location. 


Teload() 则 用 新 的 页 面 来 替换 当前 页 面 ， 它 是 从 服务 器 痛 重 新 获取 新 的 页 面 ， 不 会 读 取 客 户 痪 线 
存 且 新 的 URL 将 覆盖 History 对 象 中 的 当前 记录 (不 可 通过 “后 退 ”按钮 返回 原先 的 页 面 ) 。 
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基本 语法 : 


实例 代码 : 


运行 代码 效果 ， 单 击 “ 加 载 的 新 文档 ”按钮 ， 触 发 goUrl() 函 数 ， 浏 览 器 将 加 载 百度 首页 以 替 
换 当 前 页 面 ， 如 图 11-10 和 图 11-11 所 示 。 


EE T I 


图 11-10 单 击 “加 载 的 新 文档 ”按钮 | 图 1111 加 载 新 文档 


课堂 实录 “e 一 他 
人 性 11.2.7 “课堂 小 实例 一 一 页 面 加 载 结束 后 ， 加 载 下 一 个 页 面 


href 是 Location 最 重要 的 


属性 ， 用 于 获取 当前 文档 的 URL 或 设置 URL。 如 果 设 置 URL， 将 导航 


到 新 的 页 面 。 下 画 
实例 代码 : 


<html> 


<head> 


通过 实例 讲解 实现 一 个 页 面 加 载 结束 后 ， 加 载 下 一 个 页 面 的 操作 。 


<meta http-equiv="content-script-type" content="text/javascript"> 


<meta http-equiv="content-style-type" content="text/css"> 
<title></title> 


<script type="text/javascript"> 


= 


function next1(){ location.href = "http://www.sina.com.cn/" } 


--> 
</script> 


<style type="text/css"> 


== 


body { background-color: #ffffff; } 


--> 
</style> 
</head> 


<body onload="settimeout (next1()',10000)"> 
* 页 面 加 载 结束 后 ， 加 载 下 一 个 页 面 


<p> 页 面 加载 结 束 10 秒 钟 后 加 载 下 一 个 页 面 </p> 


<img src="e.jpg" width="474" height="276"> 


</body> 
</html> 


在 本 例 中 ， 当 页 面 加 载 结束 10 秒 后 ， 触 发 next1() 函 数 ， 在 浏览 器 中 加 载 location.href 中 设 定 的 
URL。 通 过 变更 “settimeout( “next1()”,10000)” 中 的 10000 可 以 变更 加 载 下 一 个 页 面 的 时 间 。 


运行 代码 的 效果 如 


图 11-12 和 


图 11-13 所 示 。 


Bi Wo rr po 0 WS 


HS 


NE Oe re EET TE 


图 1 


1-12 ”加 载 页 面前 


图 11-13 ”加 载 下 一 个 页 面 


@ 6。™ 


] 1 3 Ese 


运用 上 面 的 所 学 知识 ， 制 作 


入 用 户 名 和 密码 进行 验证 ， 具 体操 作 步 骤 如 下 。 


个 简单 的 用 户 登 录 页面， 需要 输 


(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 11-14 所 示 。 
(2) 打开 代码 视图 ， 在 <head> 和 </head> 之 间 相应 的 位 置 输入 以 下 代码 ， 如 图 11-15 所 示 。 


<script> 

function ok() 

» 

if (document .myform.myname .value.length<1) 
alert ("用 户 名 不 能 为 空 ") ; 

else if(document.myform.psw.value!="123456") 
alert ("密码 错误 ") ; 


else 


window.open() .document .write ("欢迎 光临 ，"+document .myform.myname .value+"<a 


href=http://www.google.com> 请 点 击 这 里 </a>") ; } 
</script> 


图 11-14 打开 网 页 文档 
(3) 打开 拆 分 视图 ， 在 <body> 和 </body> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 11-16 所 示 。 


图 11-16 输入 代码 
(4) 运行 代码 ， 用 户 登 录 前 如 图 11-17 所 示 ， 输 入 密码 登录 后 如 图 11-18 所 示 。 


图 11-15 输入 代码 
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JavaScript 网 页 设计 与 网 站 特效 国 汪 荆 相 二 


图 11-17 用 户 登录 前 图 11-18 用 户 登录 后 


@ 


1. 填空 题 
(1) JavaScript 中 的 包含 的 用 户 已 浏览 的 URL 的 信息 ， 是 指 浏览 器 的 浏览 历史 。 
(2) History 在 JavaScript 中 是 用 来 后 退 了 ， 基 本 写法 是 常用 的 写法 。 
(3) Location 对 象 的 方法 可 以 重新 装载 当前 文档 ，_ ”可 以 装载 一 个 新 文档 
而 无 须 为 它 创 建 一 个 新 的 历史 记录 。 

2. 操作 题 
设计 网 页 中 常见 的 回 退 到 某 页 的 代码 ， 如 图 11-19 所 示 。 

Er 本 有 

& EE， DJavaScript 殉 页 程序 开 发 与 实 俩 过 | 4+| xX 用 gs arc 7- 

EE 

育 收 天 | 着 无 5 量 文科 

12345678910 

RB 
EA ET 


图 11-19 回 退 到 某 页 
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第 12 章 
表单 对 象 和 图 片 对 象 


本 章 导 读 

表单 是 最 常见 的 与 JavaScript 一 
起 使 用 的 HTML 元 素 之 一 。 在 网 页 中 
用 表单 来 收集 从 用 户 那 里 得 到 的 信 
息 ， 并 且 将 这 些 信息 传输 给 服务 器 来 
处 理 。 要 实现 动态 交互 ， 必 须 掌 握 有 
关 表 单 对 象 Form 更 为 复杂 的 知识 。 
就 和 JavaScript 里 的 很 多 其 他 对 象 一 
样 ，Image 对 象 也 带 有 多 个 事件 处 理 
程序 ， 可 以 通过 image 对 象 来 处 理 与 
图 片 有 关 的 各 种 特效 。 


技术 要 点 
@ Form 表 单 对 象 
@ Image 图 片 对 象 


ee 


JavaScript 网 页 设计 与 网 站 特效 思 宇 EE 必 二 Se 
实例 展示 


六 于 地 各 和， 素 切 等 全 古 用 提 诈 YI， 册 有， 扫 
化 汪 ， 刘 大 理 生活 条码 ， 和 到， 辣 训 二 


肚 来 对 去 的 图 片 输入 密码 进入 网 页 


] II ] Form 表 单 对 象 o 


在 JavaScript 程 序 中 ， 使 用 Form 标 记 来 创建 表单 对 象 。 通 常 在 
Form 标 记 对 中 定义 了 表单 控件 标记 ， 这 些 表单 控件 标记 就 创建 了 form 元 素 对 象 。 


用 12.1.1 课堂 小 实例 一 一 在 链接 中 使 用 单 选 按钮 
JavaScript 控 制 单 选 按钮 ， 可 自 定义 每 个 按钮 的 链接 地 址 ， 从 而 改变 该 链接 的 网 址 ， 根 据 用 
户 的 选择 返回 不 同 的 链接 地 址 。 

本 例 在 单 选 按钮 中 设置 事件 句柄 onClick， 以 便 在 单 击 单 选 按钮 时 触发 函数 ， 传 递 URL 并 在 f2 
框架 中 加 载 页 面 。 

使 用 Location 对 象 的 herf 属性 从 框架 中 读 取 页 面 时 ， 关 闭 框架 显示 页 面 的 操作 如 本 例 所 示 ， 需 
要 指定 “parent.top.location.href=URL” 及 top 属 性 。 


<input type="radio" name= ”radio 对 象 名 称 " value=" 值 "事件 句柄 > 


在 链接 中 使 用 单 选 按钮 的 效果 如 图 12-1 至 图 12-5 所 示 。 
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@ oo 第 1? 章 本 


Dveas pa 


[TI EREYT 了 


图 12-1 在 链接 中 使 用 单 选 按 钮 的 效果 图 12-2 在 链接 中 使 用 单 选 按钮 的 效果 


= ndow Internet Explorer 


imemet| FPS 五 -wm 。 


图 12-4 在 链接 中 使 用 单 选 按 钮 的 效果 


TT - 工 7 low | 
图 12-5 在 链接 中 使 用 单 选 按 钮 的 效果 
在 实际 测试 时 ， 需 要 另 准备 “f2.html”、 “page1.html”、“page2.html”、“page3. 
html”、“top.html”5 个 HTML 文 件 。 
框架 窗口 (index.html) 实例 代码 : 
<frameset cols="]180,*"> 


<frame src="fl.html" name="f1"> 
<frame src="f2.html" name="f2"> 


</frameset> 
<noframes> 
使 用 框架 功能 。 请 在 支持 框架 的 浏览 器 中 进行 测试 。 


</noframes> 


171 


JavaScript 网 页 设计 与 网 站 特效 因 让 本 二 
fl1.html 实 例 代码 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title></title> 

<script type="text/javascript"> 

<l== 

function pl(wl) { parent.f2.location.href=wl } 

function tp(w2) { parent.top.location.href=w2 } 

hs 

</script> 

<style type="text/css"> 

SS 

body { background-color: #ffffff; } 

--> 

</style> 

</head> 

<body> 

<form> 

<p> 

<input type="radio" name= "frgo" value="fr"” onclick="pl('f2.html')”checked> 返 
回 项 部 

</p> 

<p> 

<input type="radio" name= "frgo" value="fr" onclick="pl (pagel.html')"> 第 1 页 

</p> 

<p> 

<input type="radio" name= "frgo" value="fr" onclick="pl (page2.html')"> 第 2 页 

</p> 

<p> 

<input type="radio" name= "frgo" value="fr" onclick="pl (‘page3.html')"> 第 3 页 

</p> 

<p> 

<input type="radio" name= "frgo" value="fr" onclick="tp('top.html')"> 关 闭 框架 

</p> 

</form> 

</body> 

</html> 


轩 12.1.2 课堂 小 实例 一 一 给 按钮 添加 链接 


按钮 是 网 页 中 常常 能 见 到 的 一 种 对 象 ， 下 面 给 按钮 添加 链接 。 


<input type="button"” name=" 对 象 名 称 " Value=" 值 "事件 句柄 > 
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需要 指定 “window.open(URL,“_TOP”)” 和 窗口 名 称 “_top”。 

在 实际 测试 时 ， 需 另行 准备 “f1.html”、“page1.html”、“page2.html”、“page3. 
html”、“top.html”5 个 HTML 文 件 。 

框架 窗口 (index.html) 实例 代码 : 


f2.html 实 例 代码 : 


JavaScript 网 页 设计 与 网 站 特效 思 宇 上 E 必 二 


onclick="P1 (‘pagel .html')"> 
<input type="button" name= "FBGo3" value=" 第 2 页 " 
‘onClick="P1 (page2 .htm1')"> 

<input type="button" name= "FBGo4" value=" 第 3 页 " 
‘onClick="P1 (page3.htm1')"> 

<input type="button" name= "FBGo4" value=" 关闭 框架 " 
‘onClick="TP ('top.html')"> 

</form> 

</body></html> 


区 区 二 深 加 夺 入 的 小 未 训 国 0 ES 10 所 示 。 


CREWE) DID CE CE RR mE [其 页] [- 瑟 杞 


Om Wa A PRT 


图 12-6 给 按钮 添加 链接 的 效果 图 12-7 给 按钮 添加 链接 的 效果 


O me rR EE TT 


CR EE) CER CR) RR WR] CME CE) MO 
RB 


图 TT I TT 
图 12-8 给 按钮 添加 链接 的 效果 图 12-9 给 按钮 添加 链接 的 效果 


图 12-10 给 按钮 添加 链接 的 效果 
本 例 为 在 按钮 中 设置 事件 句柄 onClick， 以 便 在 单 击 按钮 时 触发 函数 ， 进 而 传递 URL 并 在 f1 框 
架 中 加 载 页 面 。 
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国 12.1.3 ”课堂 小 实例 一 一 给 下 拉 菜 单 添加 链接 


很 多 Web 站 点 都 采用 某 种 形式 的 下 拉 菜 单 。 下 拉 菜 单 可 以 设计 用 于 访问 子 菜单 ， 而 这 些 子 菜 
单 进而 可 以 访问 其 他 子 菜单 。 现 在 ， 就 可 以 给 下 拉 菜 单 添加 链接 。 
<select name=" 对 象 名 称 ” 事 件 句 柄 > 


在 JavaScript 中 ， 由 于 程序 会 自动 创建 从 0 开始 的 选项 数组 ， 因 此 可 以 查看 所 选择 的 选项 。 先 
在 “WO0FSGo.selectedlndex==0” 中 指出 Select 名 称 FSGo 的 第 一 个 索引 ， 即 “<option> 跳 转 至 
顶部 ”。 当 此 值 为 真 时 ， 将 指定 的 “f1.html” 的 URL 读 取 到 框架 ft 中 。 

在 实际 测试 时 ， 需 另行 准备 “f1.html”、 “page1.html”、“page2.html”、“page3. 
html”、“top.html”5 个 HTML 文 件 。 

框架 窗口 (index.html) 实例 代码 : 

<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title></title> 
</head> 
<frameset rows="*,80"> 
<frame src="fl.html" name="f1"> 
<frame src="f2.htm]l" name="f2"> 
</frameset> 
<noframes> 
使 用 框架 功能 。 请 在 支持 框架 的 浏览 器 中 进行 测试 。 
</noframes> 
</html> 


f2.html 实 例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title></title> 

<script type="text/javascript"> 


二 二 之 

function FC(WO) { 
if (WO.FSGoO.selectedIindex == 0) { parent.fl.location.href = "fl.html" } 
if (WO.FSGoO.selectedIndex 一 1) { parent.fl1.location.href = "pagel.html" } 
if (WO.FSGO.selectedIindex 一 2) { parent.f1.location.href = "page2.html" } 
if (WO.FSGoO.selectedIndex 一 3) { Parent.fl.location.href = "page3.html" } 
if (WO.ESGo.selectedIndex == 4) { parent.top.location.href = "top.html" } 

} 

Vi > 

</script> 
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We 
rm 


图 12-11 在 链接 中 使 用 菜单 的 效果 


本 例 为 获取 表单 内 容 变 化 时 的 事件 ， 通 过 onChange 事 件 句 柄 ， 在 变更 菜单 选项 时 ， 触 发 
“FCO” 函 数 。 


I76 


@ oo 第 1? 章 碟 3 象 


用 12.1.4 ”课堂 小 实例 一 一 在 文本 框 中 滚动 显示 文字 一 一 一 一 一 0 
在 文本 框 中 结合 JavaScript 实 现 文字 慢 慢 滚动 显示 的 效果 ， 给 网 页 增加 富有 创意 的 文字 特效 。 


在 文本 框 中 滚动 显示 文字 的 效果 如 图 12-14 和 图 12-15 所 示 。 


JavaScript 网 页 设计 与 网 站 特效 国 让 到 本 二 


Em 
ms BootpAE TR 


在 六 本 柜 中 沪 动 旺 示 文 


天 证 


图 12-14 在 文本 框 中 滚动 显示 文字 的 效果 图 12-15 ”在 文本 框 中 滚动 显示 文字 的 效果 

由 于 文字 是 在 文本 框 中 滚动 ， 而 不 是 在 状态 栏 中 滚动 ， 所 以 要 将 “window.status” 部 分 蔡 换 
为 “document.Fmess.fmess.value”。 这 表示 document 对 象 中 名 称 为 Fmess 的 表单 对 象 中 名 为 
Fmess 对 象 的 名 称 的 值 ， 并 将 字符 串 代 入 其 中 。 


肛 12.1.5 课堂 小 实例 一 一 变更 复 选 框 的 值 

复 选 框 是 一 种 具有 双 状 态 按钮 的 特殊 类 型 ， 可 以 选中 或 者 不 选中 。 下 面 制作 一 个 变更 复 选 杠 
值 的 实例 。 

<form name=" 表 单 对 象 名 称 "> 

<input type="checkbox” name="checkbox 对 象 名 称 "” value=" 值 "> 

document .表单 名 称 . checkbox 对 象 名 称 . value=" 值 " 


实例 代码 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 

<title></title> 

<script type="text/javascript"> 

用 

function changel (value){ document.form.checkbox.value=value } 
function change2(){ alert (document.form.checkbox.value) } 
WE==> 

</script> 

<style type="text/css"> 

< 

body { background-color: #ffffff; } 

2 

</style> 

</head> 

<body> 

* 变 更 复 选 框 的 值 


<p> 
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<form> 
<input type="button" value=” 变 更 值 ”onclick="changel (' 已 变更 。')"> 
<br> 
<input type="button" value=" 还 原 " onclick="changel ('checkbox')"> 
</form> 
</p> 
<hr> 
<form name="form"> 
<input type="checkbox" name="checkbox" value="checkbox" 
checked>checkbox<br> 
<input type="button"” value=" 查看 form 值 " onclick="change2()"> 
</form> 
</body></html> 


变更 复 选 框 的 选中 文本 的 效果 如 图 12-16 和 图 12-17 所 示 。 
De TI 一 es 


a BV 


ms Ovni nM 


并 更 抽 志 相 的 值 “和 的 全 


ER 
[基本 


checbos 


图 12-16 变更 复 选 框 的 选中 文本 的 效果 图 12-17 变更 复 选 框 的 选中 文本 的 效果 
通过 设 定 value 属 性 的 值 ， 可 实现 后 续 变更 复 选 框 值 的 功能 。 

在 本 例 中 ， 单 击 “ 变 更 值 ” 按 钮 时 ， 通 过 将 “已 变更 。” 值 设置 在 复 选 框 的 value 属 性 中 ， 使 
复 选 框 的 值 变 更 为 “已 变更 。”。 同 样 ， 在 单 击 “ 还 原 ” 按 钮 时 ， 恢 复 初始 值 CheckBox。 另 外 ， 
击 “ 查 看 form 值 ”按钮 时 ， 就 会 弹出 警告 对 话 框 ， 通 过 查看 对 话 框 中 显示 的 复 选 框 的 值 ， 可 确 
定 该 值 是 否 已 被 变更 。 

用 12.1.6 课堂 小 实例 一 一 密码 验证 
使 用 JavaScript 制 作 的 表单 可 以 作为 网 页 的 登录 入 口 。 本 实例 就 来 制作 一 个 简单 的 登录 系统 ， 


如 果 输 入 的 密码 正确 ， 则 可 以 登录 到 网 页 如 果 不 正确 ， 则 给 出 提示 信息 。 
实例 代码 : 


<!doctype html> 


<html> 

<head> 

<meta charset="utf-8"> 
<title></title> 

<script type="text/javascript"> 


I= 
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function GetP(s) { 
if (s=="123456") { location.href = "OK.html" } 


else { alert ("输入 的 密码 "+s+" 不 正确 !!") } 


} 
1 和 
</script> 


<style type="text/css"> 

并 

body { background-color: #ffffff; } 
--> 

</style> 

</head> 

<body> 

* 输 入 密码 

<p> 

密码 为 "123456"<br> 

输入 后 请 单 击 表单 以 外 的 其 他 地 方 。<br> 
<form name="anshyo"> 

<input type="password" name="anshyo" onBlur=" GetP (this.value)" value=""> 
</form> 

</p> 

</body> 

</html> 


输入 密码 的 效果 如 图 12-18 和 图 12-19 所 示 。 


虱 DVavaScript 风 页 加 永 开 必 与 安 供 课堂 实录 \ 交 果 \1 和 12.15\index html - [ECG 入 OK'! - Windows Intemet Ecplorer [Ex 一 | 
pr GO le vorins @ -| [x | 2m Dr 
= [HD RV) A 工具 (TD 坟 地 (H) 
| 各 8 | 儿 Dvavascript 由 加 开发 便当 实 入 果 IE 和 Fa 
"输入 密码 rR 
i 已 输入 了 正确 的 密码 。 
密码 为 "123456' 
全 局 汪 和 表 的 其 他 地 广 ， 
e0000d| | 
| 
人 NR 
| 
| 
有 
图 Intemnet | 怀 扩 楼 式 基 用 7 R100% ~ | 上 图 Irternet | 年 P 要 区 类 有 往 ” 成 100%6 
图 12-18 输入 密码 图 12-19 输入 密码 的 效果 


国 12.1.7 课堂 小 实例 一 一 确认 是 否 重 置 
在 本 例 中 ， 单 击 “ 重 置 ”按钮 时 ， 弹 出 确认 对 话 框 。 单 击 “ 确 定 ”按钮 后 清空 文本 框 中 的 内 
容 ， 否 则 中 止 重 置 过 程 。 


onReset=" 脚 本 语言 | 函数 " 


Er 
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使 用 onReset 事 件 句 柄 可 以 获取 在 单 击 } 
“ 重 置 ”按钮 时 的 事件 。 确 认 是 否 重 置 的 效果 
如 图 12-20 所 示 。 : 
在 实际 测试 时 ， 需 设 定 接收 数据 的 CGI 服 | 
务 器 ， 确 定 是 否 将 本 例 中 的 ***@*****.com 部 | 
分 变更 成 为 接收 邮件 的 地 址 。 : 


图 12-20 确认 是 否 重 置 的 效果 


课堂 实录 “e 一 他 
国 12.1.8 课堂 小 实例 一 一 选择 上 传 的 文件 


FileUpload 对 象 是 选择 上 传 文件 的 表单 。 本 例 中 单 击 “ 浏 览 ” 按 钮 后 可 以 查看 本 地 资源 ， 选 择 
后 在 文本 框 中 就 会 显示 文件 名 称 。 这 时 Value 属性 中 将 保存 资源 路 径 信息 ， 可 使 用 “document. 表 
单 名 称 .file 对 象 名 称 .Value” 进 行 查看 。 

FileUpload 对 象 只 能 选择 上 传 的 文件 ， 而 实际 的 上 传 操 作 需 要 借助 HTML 及 CGI 完 成 。 在 
JavaScript 中 为 了 确保 安全 ， 所 以 禁止 访问 本 地 资源 。 


<input type="file” name="file 对 象 名 称 "> 
document .表单 名 称 .file 对 象 名 称 .value 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title></title> 

<style type="text/css"> 

< 

body { background-color: #ffffff; } 

--> 

</style> 

</head> 

<body> 

选择 上 传 的 文件 

<form name="forml"> 

<p> 

准备 上 传 的 文件 : <input type="file" name="UploadFile"> 

</p> 

<input type="button" value=" 文件 信息 " 
onClick="alert ("该 文件 的 路 径 为 ' + document.forml .UploadFile.value+'。')"> 

</form> 

</body></html> 


选择 上 传 文件 的 效果 如 图 12-21 至 图 12-23 ; [有 ono 和 sme2sRR UI Wr in 
所 示 六 DTT 一 Ey C2 pr 
en” 
Er | 
O ee | 芝 用 和 0% 


图 12-21 选择 上 传 的 文件 | 
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迁 过 有 加 葵 的 文件 
(EO rr - 
”4 za 人 ey i 
| | 准备 上 的 文件 | DE 一 | C5 
EE 
本 本 | 和. ET 
3 2 2 
a El FY ss 
司 [sr Er 
ES ry aizs 省 
柄 计算 几 
名 ea 二 (c 
:| 加 下 | ， 
Cbd pin ciao [15)jpg index [Hjpg index QUjpg 
所 (四 ce 
2 
Za 5 ER 
== ] 
2 A | 全 Intemet | 保 PP 慷 式 可 可 何 ~ 或 1006 ~ 


图 12-22 选择 上 传 文件 的 效果 


12.2.… 


就 介绍 image 图 片 对 象 的 使 用 。 


仆 12.2.1 课堂 小 实例 一 一 获取 图 片 信息 


利用 Image 对 象 可 以 创建 页 面 上 图 片 从 0 开始 的 数组 。 参 考 Image 对 象 信息 时 ， 除 了 可 以 使 


<img> 中 设置 的 name 外 ， 


还 可 以 使 


document . 对 象 名 .border 


document . 对象 名 . 
document .对象 名 . 
document .对象 名 . 
document .对象 名 . 
document .对象 名 . 
document .对象 名 . 
document .对象 名 . 


Complete 
Height 
hspace 
Lowsrc 
SFC 
Vspace 
Width 


图 12-23 选择 上 传 文件 的 效果 


image 图 片 对 象 


用 高 解析 度 的 图 片 的 确 可 以 让 一 个 网 页 容光 焕发 ， 本 节 


数组 。 


【属性 】 
【属性 】 
【属性 】 
【属性 】 
【属性 】 
【属性 】 
【属性 】 
【属性 】 


Border 属 性 用 来 设置 边框 值 ， 在 图 片 加 载 结 束 时 ，Complete 属 性 的 值 为 true， 在 图 片 加 载 没 
有 结束 时 ，Complete 属 性 值 为 false; Height 属 性 用 来 设置 图 片 的 高 度 ，Hspace 属 性 用 来 设置 与 文件 


的 横向 间隔 ，Lowsrc 属 性 


来 设置 在 显示 图 片 前 ， 所 显示 的 低 分 辨 率 图 片 的 URL; Src 属 性 用 来 设置 
图 片 文件 的 URL; Vspace 属 性 用 来 设置 与 文件 的 纵向 间隔 ，Width 属 性 用 来 设置 图 片 的 宽度 。 


其 中 除 Scr 属 性 外 均 为 只 读 属性 ， 不 允许 变更 。 由 于 Scr 属 性 可 变更 ， 所 以 可 以 通过 改变 该 属 


性 来 蔡 换 图 片 。 
实例 代码 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 


<title></title> 
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Tele 刘 堂 详 录 。。 一 合 


加 
加 


获取 


片 信息 的 效果 如 图 12-24 所 示 。 


人 E:\ 正 在 号 的 蔬 VEtal Javas 


ED := 吕 寺 | 
六 全 和 六 丰 四， 查看 轨 。 收 辣 赤 因 “工具 四 和 0 
ABR | 高 图 3 
局 \ 下 王 S 的 蔬 Utnl Jaraserift 网 页 侧 作 与 从 ~ 可 二 ”可 面 中 ”安全 EJ]，I 且 由、 者 - ”| 


了 图 片 信息 


图 12-24 获取 图 片 信息 的 效果 


国 12.2.2 课堂 小 实例 一 一 图 片 轮番 显示 效果 


JavaScript 可 以 让 多 个 Banner 图 片 广告 轮番 交替 显示 ， 如 果 你 的 网 站 广告 位 被 占 满 了 ， 可 以 考 


虑 让 多 个 图 片 广告 轮番 交替 显示 ， 同 时 链接 也 跟着 变化 ， 这 样 是 不 是 为 你 节省 了 宝贵 的 广告 位 。 


对 象 名 称 =new Image () 
document .对 象 名 称 . scr 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title></title> 

<script type="text/javascript"> 

区 一 

var imagesetb = 1; 

anima = new array(); 

TOr(i = 0 i < 6 Lt 

anima[i] = new image() ; 
anima[i].src = "image" + i + ".jpg"; 
} 

function anime 1() { 

document .animation.src = anima[imagesetb] .src; 
imagesetb++; 

if(imagesetb > 5) { 

imagesetb = 0; 

} 

settimeout ("anime 1()",500); 


} 
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全 

</script> 

<style type="tezxt/css"> 
二 三 二 

body { background-color: #ffffff; } 
= 

</style> 

</head> 

<body onload="anime 1()"> 

* 制 作 图 片 的 动画 效果 


<p> 


<img src="image0.jpg" name="animation" 


height="263"> 


着 Daascnpt 巾 册 得 床 开间 与 人 深交 杂 \ 训 二 \12\12.2 Nindex herl - Window ntenet sxplc_ -+l 


| wm 


alt="animation" border="0" width= "375" 


</p> 

</body> 

</html> 

制作 图 片 轮番 显示 的 效果 如 图 12-25 和 图 12-26 所 示 。 


ET 
乱 pVavascriPl 同 本 民生 实 和 果 岂 产 叶 \ 时 


+ 市 作 图 片 的 动画 戏 音 


[TIE lo 


三 


+ 制作 图 片 的 动画 效果 


am 一 


@ irene | ORR SH 


图 12-25 图 片 轮番 显示 的 效果 
由 于 Scr 属 性 可 以 变更 ， 因 此 利 


该 


属性 可 以 实时 切换 多 张 图 片 ， 即 刻 实现 动画 效果 。 
本 例 中 ， 首 先 准备 “image1.jpg”~“image5.jpg” 这 5 张 医 
象 的 数组 。 数 组 元 素 中 含有 “anima[1]”~“anima[5]”5 个 image 对 象 ， 然 


设置 图 


图 12-26 ”图片 轮番 显示 的 效果 


图 


片 ， 使 F 


array 对 象 创建 image 对 
后 分 别 在 image 对 象 中 


片 文件 的 url 值 ， 如 在 “anima[1].scr” 中 设置 “image1.jpg” 值 ， 在 “anima[2]scr” 中 设置 
“image2.jpg” 值 等 。 


读 取 页 面 时 ， 设 置 在 <body> 中 的 onload 事 件 句柄 将 会 触发 设置 动画 处 理 的 函数 


“anime_1()”。 在 函数 处 理 中 ， 在 “document.animation.scr” 中 设置 “anima[1]” 
~“anima[5]” 值 ， 在 “settimeout” 处 理 中 再 次 触发 函数 。 


“document.animation.scr” 中 所 设 


的 值 从 “anima[1].scr” 开 始 执行 ， 直 到 “anima[5].scr” 时 停止 ， 之 后 执行 第 13 行 到 第 15 行 的 代 


码 ， 将 数值 再 
肯 12.2.3 课堂 小 实例 
本 例 中 使 
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次 返回 到 “anima[1].scr”。 如 此 反复 操作 即 可 实现 动画 效果 。 


控制 动画 播放 


了 上 节 “ 图 片 轮 番 显示 效果 ”中 创建 的 Image 对 象 数组 来 制作 控制 动画 的 播放 效果 。 


JavaScript 网 页 设计 与 网 站 特效 国 汪 芭 相 二 


<form> 


<input type="button" value=" 开始 
<input type="button" value=" 停止 


</form> 
</body> 
</html> 


" onclick="anime 2()"> 


" onclick="stop()"> 


控制 动画 播放 的 效果 如 图 12-27 和 图 12-28 所 示 。 


Dov 


万 到 地 开 必 与 二 图 "me xj 中 ns 
ET 
突 必 乔 去 | 着 Davascript 网 克 伍 了 开发 二 突 折 果 宇 实录 \ 效 末 - 


2 2 yndeshtml - Windows ntcmet Eporr -=| Si 


-| [SS aas "| < 
m4 BD SE CE TRD Se 
实 二。 加 DNevascript 风 中 EE 字 开发 与 实 济 深 生 实录 \ 玖 采 


Der sop ER 2 Mindex ri Windows ntemet Explorer -0 I 


只- 用 


控制 动画 慨 放 


本 过 司 | 攻 了 到 | 
ee Omer ep pr oo es @ rie ear 8 0 
图 12-27 控制 动画 播放 的 效果 图 12-28 ”控制 动画 播放 的 效果 
单 击 “ 开 始 ”按钮 时 ， 触 发 “anime_2()” 函 数 ， 调 用 Image 对 象 数组 的 值 ， 开 始 播放 动画 。 


单 击 “ 停 止 ”按钮 时 ， 触 发 “stop()” 
通过 在 “ID 名 =setTimeout()” 及 


“setTimeout()” 方 法 中 设置 ID， 并 


函数 ， 使 用 “clear Timeout()” 方 法 停止 播放 动画 


及 “clearTimeout()” 方 法 中 调用 该 ID 来 设置 “clear-Timeout()” 方 法 


12.2.4 
本 例 首先 准备 了 3 张 
“button2.jpg”， 单 击 按钮 时 的 图 片 


图 


片 ， 分 别 为 普通 的 按钮 


图 


在 “clearTimeout(ID 名 )” 


课堂 小 实例 一 一 指向 或 单 击 图 片 时 ， 使 图 片 发 生变 换 


片 “button1.jpg”， 和 鼠标 位 于 按钮 上 时 的 


图 


后 按照 在 “图 片 轮番 显示 效果 ”上 


“button3.jpg”， 


Pi 


的 要 领 ， 创 建 分 别 含有 URL 的 3 个 数组 元 素 。 


对 象 名 称 =new Image () 
Document .对 象 名 称 . scr 
Document .Image 【索引 】 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title></title> 

<script type="text/javascript"> 
i 


Var buttonimage = new array(); 
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指向 或 单 击 图 片 时 ， 侠 图 片 发 生变 化 


(ea 
ls) 


neemet | 人 RP 入 才 要 种 lo0% ~ Dyarascrpm! memet | 人 要 区 村 有 


本 lo -| 


图 12-29 ”指向 或 单 击 图 片 时 ， 使 图 片 发 生变 换 的 效果 ”图 12-30 指向 或 单 击 图 片 时 ， 使 图 片 发 生变 换 的 效果 


实际 使 画面 发 生变 化 的 是 设置 在 链接 中 的 事件 句柄 ， 改 变 哪个 画面 是 要 在 读 取 HTML 文 件 时 且 
在 生成 的 “document.images[0]” 开 始 的 图 片 数组 中 指定 的 。 
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课堂 实录 “e 一 全 
月 12.2.5 “课堂 小 实例 一 一 显示 加 载 图 片 状态 


本 例 中 ， 分 别 获 取 每 个 图 片 文 件 的 状态 ， 并 在 文本 框 中 显示 相应 的 信息 。 在 该 例子 中 ， 如 


将 文本 框 设 置 在 图 片 的 后 面 ， 脚 本 语言 有 时 就 不 能 正常 运行 。 


件 句柄 触发 事件 ， 在 读 取 画 面 过 程 中 出 现 错误 时 ， 将 由 onError 事 件 句柄 触发 


在 读 取 图 片 时 ， 如 果 单 击 “ 停 止 (stop)” 按 钮 等 停止 读 取 图 片 操作 的 情况 下 ， 将 由 onAbort 
有 件 ， 在 读 取 画 面 


| 


束 时 ， 将 由 onLoad 事 件 句 柄 触发 于 
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pT 


件 。 


onAbort=" 脚 本 语言 | 函数 " 【事件 句柄 】 
onError=" 脚 本 语言 | 函数 " 【事件 句柄 】 
onLoad=" 脚 本 语言 | 函数 " 【事件 句柄 】 


实例 代码 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 

<title></title> 

<script type="text/javascript"> 

= 

function stop(){ document .zyoutai.zyo.value = "图 片 加 载 被 中 止 ” } 
片 加 载 失败 ”} 
function ok() { document .zyoutai.zyo.value = "图 片 加 载 结束 ”} 
WA 

</script> 


function err(){ document.zyoutai.zyo.value = 


<style type="text/css"> 

< = 

body { background-color: #ffffff; } 

> 

</style> 

</head> 

<body> 

显示 加 载 图 片 状 态 

<p> 

<form name="zyoutai"> 

<input type="text"” name="zyo" value=" 正 在 加 载 图 片 . . .”size="60"> 
</form> 

</p> 

<p> 

<img src="image.jpg" alt="image.jpg" width="950" height="700" onabort="stop()" 
onerror="err()" onload="ok()"> 

</p> 

</body> 

</html> 


不 


= 


结 


显示 加 载 图 片 状态 的 效果 如 图 12-31 所 示 。 


图 12-31 显示 加 载 图 片 


用 12.2.6 课堂 小 实例 一 一 确认 是 否 重新 加 载 图 片 


时 


本 例 在 读 取 图 片 发 生 错误 时 ， 会 使 用 onError 事 件 句 柄 触发 事件 ， 从 而 在 没有 正常 读 取 画 面 
弹出 对 话 框 来 确认 是 否 重新 加 载 页 面 。 
onError=" 脚 本 语言 | 函数 " 【事件 句柄 】 


实例 代码 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title></title> 
<script type="text/javascript"> 
se 
function ERR2(){ 

if ( confirm ("图 片 加 载 失 败 ， 是 否 重新 加 载 页 面 ? ") ) 
{ location.href="08ima.html" } 
} 
WR 
</script> 
<style type="text/css"> 


< == 

body { background-color: #ffffff; } 
到 > 

</style> 

</head> 

<body> 

确认 是 否 重新 加 载 图 片 


<p> 该 页 面 图 片 已 被 切断 链接 。</p> 

<p><img src="onror.jpg" alt="onror.jpg" width="500" height="200" 
onError="ERR2 () "></P> 

</body> 

</html> 
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JavaScript 网 页 设计 与 网 站 特效 因 滞 芭 本 二 


确认 是 否 重新 加 载 图 片 的 效果 如 图 12-32 所 示 。 
F pt R22 ind htm - Windows ntemet Explorer 
l®e rm 
EEC EEC 
畜 必 若 闪 | 蕊 chUavascrip( 网 页 民 未 开 六 与 宇 本 时 兰 这 二 ,过 二 


全 ineme! | 人 和 入 区 于 用 在 -所 100% ”用 


12-32 确认 是 否 重新 加 载 图 片 的 效果 


用 12.3.1 ”实战 应 用 1 一 一 如 何 制作 在 网 页 上 不 断 飘 来 飘 去 的 图 片 
在 网 页 上 不 断 冉 来 冕 去 的 图 片 能 够 大 大 增加 网 页 的 特效 ， 可 以 利用 漂浮 的 图 片 制作 网 页 广 
告 、 重 要 的 通知 等 ， 具 体制 作 步骤 如 下 。 
(1) 打开 网 页 文档 ， 如 图 12-33 所 示 。 


Dw xin sen Sem 0 pam RD siO ue BC ss 区 . 加 Ole 


Er 


图 12-33 ”打开 网 页 文档 
(2) 切换 到 代码 视图 ， 在 <body> 和 </body> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 12-34 所 示 。 


<div id="img" style="position:absolute;"> 

<a href="http://www.123.net" target=" blank"> 
<img src="images/pl.gif" border="1"></a></div> 
<SCRIPT LANGURGE="JavaScript"> 


Var XPos = 203 
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Dw wan RD aM sn wa emo) ec zcg sa we CR 


图 12-34 输入 代码 
(3) 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 如 图 12-35 所 示 。 
Er . 


图 12-35 ” 貌 来 肢 去 的 图 片 效 果 


八 12.3.2 ”实战 应 用 2 一 一 不 用 数据 库 ， 只 有 访问 者 输入 正确 的 
名 称 与 密码 才能 进入 网 页 
利用 JavaScript 脚 本 可 以 实现 不 用 数据 库 ， 只 有 访问 者 输入 正确 的 名 称 与 密码 才能 进入 网 页 ， 
具体 操作 步 又 如 下 。 
(1) 打开 网 页 文档 ， 如 图 12-36 所 示 。 


图 12-36 打开 网 页 文档 
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(2) 切换 到 代码 视图 ， 在 <head> 与 </head> 之 间 输 入 以 下 代码 ， 如 图 12-37 所 示 。 


<script language="Javascript"> 
Re 
Var password=""; 
password=prompt (' 请 输入 密码 (本 网 站 需 输入 密码 才 可 进入 ) :", ") ; 
if (password != 'one') 
{alert ("密码 不 正确 ,无 法 进入 本 站 !!") ; 
window.opener=null; window.close();} // 密码 不 正确 就 关闭 
4 
</script> 


图 12-37 输入 代码 


加 图 
在 这 里 所 设置 的 密码 是 one。 


(3) 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 首 先 弹出 图 12-38 所 示 的 对 话 框 。 在 对 话 框 中 输 
入 正确 的 密码 ， 单 击 “ 确 定 ”按钮 ， 即 可 进入 网 页 ， 如 图 12-39 所 示 。 如 果 密 码 不 正确 将 不 能 进入 
网 站 。 


Mw 
的 提示 亡 枉 | 
请 输入 密码 体 网 站 需 输入 密码 才 可 进入 ) 总 
下 


EEC 本 ”waems 


图 12-38 【用 户 提示 】 对 话 杠 图 12-39 进入 网 页 
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12 4 EBD 一 


1. 填空 题 
(1) 在 JavaScript 程 序 中 ， 使 


”来 创建 表单 对 象 。 

(2) 利用 Image 对 象 可 以 创建 页 面 上 图 片 从 0 开始 的 数组 。 参 考 Image 对 象 信息 时 ， 除 了 可 以 
在 <img> 中 设置 的 ”外 ， 还 可 以 使 用 数组 。 

2， 操 作 题 

制作 一 个 把 鼠标 放 上 就 弹出 下 拉 菜 


单 的 效果 ， 如 图 12-40 所 示 。 


OO fe ovresrss 人 


| tn wat BE EN TAT 5 
疹 VE 关 i 


| 
EASH 


ET 


图 12-40 弹出 下 拉 菜单 的 效果 
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第 13 章 
Ajax 基础 


本 章 导读 

Ajax 由 HTML、JavaScriptw 技 
术 、DHTML 和 DOM 组 成 ， 这 一 杰出 
的 方法 可 以 将 笨拙 的 Web 界 面 转化 成 
交互 性 的 Ajax 应 用 程序 。JavaScript 
大 多 数 应 用 于 客户 端 ，.NET 主 要 应 
用 于 服务 器 端 。 在 大 多 数 情况 下 ， 两 
者 好 像 没 有 什么 关系 ， 而 Ajax 能 够 巧 
妙 地 将 客户 端 与 服务 器 端 技术 串 起 来 
而 融合 在 一 起 ， 即 客户 端 可 以 调用 服 
务 器 端的 应 用 程序 。 


技术 要 点 


了 解 传 统 的 Web 技 术 及 Ajax 的 由 来 和 一 


Ajax 技术 原理 简介 

Ajax 技术 的 优 缺点 分 析 

认识 Ajax 技术 的 组 成 部 分 
XMLHttpRequest 对 象 简介 
局 部 更 新 

实现 Ajax 


JavaScript 网 页 设计 与 网 站 特效 思 宇 EE 必 二 0] 
实例 展示 


Ajax 实 例 效果 


该 技术 在 1998 年 前 后 得 到 了 应 用 。 人 允许 客户 端 脚本 发 送 HTTP 


| 3 | 了 解 传统 的 Web 技 术 及 Ajax 的 特点 


请 求 (XMLHTTP) 的 第 一 个 组 件 由 Outlook Web Access 小 组 写成 。 该 组 件 原 属于 微软 Exchange 
Server， 并 且 迅 速 地 成 为 了 Internet Explorer 4.0 的 一 部 分 。 

随 着 网 络 时 代 的 来 临 ， 传 统 的 应 用 程序 开发 从 Client/Server 结 构 开 始 向 Browser/Server 结构 
过 渡 。B/S 结 构 可 以 在 任何 地 方 进 行 操作 而 不 需要 安装 专门 的 软件 ， 也 不 再 需要 为 每 次 系统 应 用 的 
升级 而 修改 客户 端 。 然 而 ，B/S 结 构 也 有 着 一 些 固 有 的 局 限 性 ， 例 如 ，B/S 结 构 的 浏览 器 无 法 向 C/S 
结构 那样 发 挥 客户 端 PC 的 处 理 能 力 ， 并 不 是 在 客户 端 处 理 多 个 步骤 之 后 再 将 最 终结 果 传递 到 服务 
器 端 ， 而 是 每 次 要 进行 一 个 动作 ， 就 要 把 请 求 发 送 到 服务 器 端 ， 再 由 服务 器 端 返回 结果 ， 之 后 才 
能 进行 下 一 个 请 求 。 这 样 ， 其 响应 速度 比 C/S 结 构 要 慢 很 多 。 

Ajax 不 是 一 种 新 的 编程 语言 ， 而 是 一 种 用 于 创建 更 好 更 快 以 及 交互 性 更 强 的 Web 应 用 程序 的 
技术 。Ajax 的 特点 如 下 。 


(1) 
(2) 


Ajax 前 景 非常 乐观 ， 可 以 提高 系统 性 能 ， 优 化 用 户 界面 。 
通过 Ajax， 可 使 用 JavaScript 的 XMLHttpRequest 对 象 来 直接 与 服务 器 进行 通信 。 通 过 


这 个 对 象 ，JavaScript 可 在 不 重 载 页 面 的 情况 与 Web 服 务 器 交换 数据 。 


(3) 


Ajax 在 浏览 器 与 Web 服 务 器 之 间 使 用 异步 数据 传输 〈HTTP 请 求 ) ， 这 样 就 可 使 网 页 从 


服务 器 请 求 少量 的 信息 ， 而 不 是 整个 页 面 。 


(4) 
(5) 
(6) 


Ajax 可 使 因特网 应 用 程序 更 小 、 更 快 ， 更 友好 。 
Ajax 是 一 种 独立 于 Web 服 务 器 软件 的 浏览 器 技术 。 
Ajax 的 最 大 机 遇 在 于 用 户 体验 。 在 使 应 用 更 快 响应 和 创新 的 过 程 中 ， 定 义 Web 应 用 的 规 


则 了 
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EF 在 被 二 


E 写 ， 因 此 开发 人 员 必 须要 更 注重 用 户 。 


13.2 


JavaScript 和 XML) 。 


从 这 个 组 合 名 称 上 就 可 以 看 出 Ajax 其 实 并 不 是 一 种 技术 ， 


@ 。— 


它 实际 上 是 几 种 技 


术 的 有 组 合体 。 每 种 技术 都 有 独特 之 处 ， 合 在 一 起 就 成 了 一 个 功能 强大 的 新 技术 。Ajax 的 组 成 如 
图 13-1 所 示 。 
使 用 DOM 进 行动 态 显示 及 交互 sma 
XML 


Java | Java 


开关 
ES 
号 


= 
上 - 

民 
全 
它 
三 
5 
多 
吕 


广 H 沙 痊 渤 洪 岂 当 活 二 月 


并 部 .党 赋 洱海 午 郑 二 隧 


使 用 XHTML+CSS 进 行 表示 | 


| 


Java 


图 13-1 Ajax 的 组 成 


月 13.2.1 Ajax 中 的 JavaScript 
JavaScript 毫 无 疑问 是 Ajax 了 


的 内 存 
成 ，JavaScript 就 是 用 来 实现 逻辑 的 工具 。 

JavaScript 是 一 种 混合 了 多 种 编程 思想 的 通 
编程 语言 ， 提 供 了 一 个 表面 上 与 C 系 列 语 


言 相 似 的 语法 接口 。 在 浏览 器 环境 中 ， 通 过 : 
JavaScript 引 擎 可 以 访问 浏览 器 的 一 些 本 地 功 : 
能 ， 例 如 CSS、DOM、XMLHttpRequest 对 ; 
程 | 
的 | 


象 ， 这 人 允许 页 面 开发 者 通过 编程 方式 在 不 同 
度 上 控制 页 面 的 表现 。 尽 管 在 浏览 器 中 遇 到 
JavaScript 环 境 和 特定 于 浏览 器 的 对 象 紧 紧 绑 
在 一 起 的 情况 ， 但 是 从 底层 来 看 ， 语 
语法 却 是 一 致 的 。 
JavaScript 是 Ajax 技术 中 最 重要 的 部 分 。 


Ajax 利用 JavaScript 的 特性 实现 Web 应 用 程序 : 
户 行为 触发 的 实时 响应 和 处 理 ， 包 括 鼠 标 | 法 


对 
有 有 件 、 键 盘 事 件 、 页 面 载 入 离开 或 者 事件 、 
焦点 事件 等 。JavaScript 将 HTML 与 DOM、 


We 


[ 具 箱 中 的 
核心 技术 。Ajax 应 用 程序 完全 下 载 到 客户 端 : 
中 ， 由 数据 、 表 现 和 程序 逻辑 三 者 组 ; 


言 本 身 的 | 


XMLHttpRequest 等 对 象 联系 起 来 ， 作 为 它们 
之 间 沟 通 的 渠道 。 
: JavaScript 在 响应 事件 的 函数 中 ， 提 取 
; 表单 Form 的 内 容 ， 调 用 XMLHttpRequest 对 
i 象 ， 将 表单 内 容 发 送 给 服务 器 处 理 。 有 时 候 ， 
| 在 发 送 表 单 内 容 之 前 ， 要 对 表单 内 容 的 格式 
进行 必要 的 校 验 和 预 处 理 ， 这 些 工作 也 交 由 
JavaScript 处 理 。 

服务 器 返回 浏览 器 客户 端的 处 理 数 
据 ， 通 常 由 XMLHttpReqeust 对 象 取得 。 
XMLHttpReqeust 对 象 再 将 这 些 数据 以 普通 
i 文本 或 者 XML 文档 的 形式 交 给 DOM 对 象 。 
JavaScript 最 终 再 操作 DOM， 利 用 这 些 数据 更 
i 新 Web 页 面 内 容 。 
: 总 之 ，JavaScript 在 Ajax 中 起 到 了 “ 承 
后 ”的 作用 ， 通 过 其 特有 的 属性 、 方 
集合 操纵 HTML 文 档 内容 ， 使 用 DOM、 
; XMLHttpReqeust 对 象 的 相关 属性 和 方法 ， 与 
| 服务 器 实现 异步 交互 通信 。 


前 启 


中 13.2.2 Ajax 中 的 XMLHttpRequest 


Ajax 的 最 大 的 特点 是 


无 须 刷 新 页 面 ， 便 可 向 服务 器 传输 或 读 写 数据 。 这 一 特点 主要 得 益 于 


第 13 章 廿 本 本 吓 


认识 Ajax 技术 的 组 成 部 分 一 一 。 


Ajax 的 全 称 是 Asynchronous JavaScript and XML (异步 
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JavaScript 网 页 设计 与 网 站 特效 因 让 芭 相 二 


XMLHttpRequest 对 象 ， 不 用 每 次 都 刷新 界面 ， 也 不 用 每 次 将 数据 处 理 的 工作 提交 给 服务 器 来 做 ， 
这 样 既 减轻 了 服务 器 的 负担 又 加 快 了 响应 速度 、 缩 得 了 用 户 的 等 候 时 间 。 


最 早 应 


ActiveX 组 件 扩展 自身 的 功能 ， 开 发 人 员 可 以 不 
器 上 或 者 从 


XMLHttp 的 是 微软 ，IE 〈IE5 以 上 ) 通过 人 允许 开发 人 员 在 Web 页 面 内 部 使 用 XMLHttp 


从 当前 的 Web 页 面 导航 而 直接 传输 数据 到 服务 


妥 务 器 取 数 据 。 这 个 功能 是 很 重要 的 ， 因 为 它 帮助 减少 了 无 状态 连接 的 痛苦 ， 它 还 可 


以 排除 下 载 宛 余 HTML 的 需要 ， 从 而 提高 进程 的 速度 。 对 于 大 多 数 情况 ，XMLHttpRequest 对 象 和 
XMLHttp 组 件 很 相似 ， 其 方法 和 属性 也 类 似 ， 只 是 有 一 小 部 分 属性 不 支持 。 
XMLHttpRequest 对 象 在 大 部 分 浏览 器 上 已 经 实现 而 且 拥有 一 个 简单 的 接口 ， 从 而 允许 数据 从 


客户 端 传递 到 服务 端 ， 但 并 不 会 打 断 用 户 当前 的 操作 。 使 


何 格式 ， 虽 然 从 名 字 上 建议 是 XML 格式 的 数据 。 
骨 13.2.3 Ajax 中 的 CSS 


是 一 种 频繁 使 有 


显 的 样式 元 素 ， 例 如 颜色 、 边 框 、 背 景 图 片 、 


素 相互 之 间 的 布局 以 及 简单 的 用 户 交 互 功能 ， 
仅仅 通过 样式 表 就 可 以 实现 炫目 的 视觉 效果 。 


为 了 正确 地 浏览 Ajax 应 用 ，CSS 是 一 种 | 
Ajax 开发 人 员 所 需要 的 重要 武器 。CSS 提 供 | 
了 从 内 容 中 分 离 应 用 样式 和 设计 的 机 制 。 虽 然 ， 节点。JavaScnip'3| 擎 通过 全 局 变量 document 
CSS 在 Ajax 应 用 中 扮演 至 关 重要 的 角色 ， 但 它 | 


| 来 定义 。 它 有 一 个 父 元 素 ， 没 有 或 者 有 多 个 子 
在 传统 的 Web 应 用 中 ， 样 式 表 提供 了 一 种 | 元素， 有 任意 多 个 作为 关联 数组 来 存储 的 属性 。 
很 有 用 的 方法 ， 可 以 在 某 个 地 方 定义 在 很 多 页 | | 13.2.5 Ajax 中 的 XML 
中 ， 我 们 不 再 将 | sm 
应 用 思考 为 快速 切换 的 一 系列 页 面 ， 但 是 样式 | 、 、 
最 少 的 代 三 动 : Fouage 具有 人 可 扩展 的 、 可 
”描述 的 语言 结构 ， 它 已 经 成 为 网 上 数据 和 文档 
| 传输 的 标准 。 它 是 
| 言 ， 就 正如 其 名 字 一 样 。 它 使 得 对 某 些 结构 化 
DOM 是 给 HTML 和 XML 文件 使 用 的 一 组 | 数据 的 定义 更 加 容易 ， 并 且 可 以 通过 它 和 其 他 
AP1。 它 提供 了 文件 的 结构 表述 ， 让 你 可 以 改 | 应 用 程序 交换 数据 。 
变 其 中 的 内 容 及 可 见 物 。 其 本 质 是 建立 网 页 与 | 
| 力 ， 因 此 用 XML 作为 数据 交换 的 一 个 标准 格式 
页 ) 。 通 过 使 用 DOM， 可 以 采用 编程 方式 操 | 器 端 之 间 的 通信 也 可 以 采用 这 种 办 法 。 
作文 档 的 结构 。 当 编写 Ajax 应 用 时 ， 这 是 一 种 | 
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也 是 构建 跨 浏览 器 应 上 
的 浏览 器 厂商 支持 各 种 不 同 的 CSS 级 别 。 


面 中 重用 的 样式 。 在 Ajax 应 上 


表 仍 然 是 很 有 帮助 的 ， 它 可 以 
态 地 为 元 素 设置 预先 定义 的 外 观 。 


朋 13.2.4 Ajax 中 的 DOM 


Script 或 程序 语言 沟通 的 桥梁 。 


XMLHttpRequest 传 送 的 数据 可 以 是 任 


| 特别 有 用 的 能 力 。 在 传统 Web 应 用 中 ， 我 们 通 
CSS 是 Web 设 计 沿用 已 久 的 部 分 ， 无 论 是 | 常 使 用 来 自 服务 器 的 新 的 HTML 来 刷新 整个 页 
在 传统 的 Web 应 用 还 是 在 Ajax 应 用 中 ，CSS 都 
的 技术 。 样 式 表 提 供 了 集中 定 | 面 。 而 在 Ajax 的 应 用 中 ， 用 户 界面 的 更 新 主要 
义 各 种 视觉 样式 的 方法 ， 并 且 可 以 非常 方便 地 | 是 使 用 OM 来 完成 的 。Web 页 面 中 的 HTML 
设置 在 页 面 的 元 素 上 。 样 式 表 可 以 定义 一 些 明 | 
| 签 ， 它 代表 这 个 文档 。 在 它 内 部 的 标签 代表 文 
透明 度 和 大 小 等 。 此 外 ， 样 式 表 还 可 以 定义 元 | 档 的 主体 部 分 ， 是 可 见 的 文档 结 
| 在 文档 主体 之 内 ， 有 表格 、 段 落 、 列 表 以 及 其 他 


| 的 标签 类 型 ， 每 个 标签 之 中 还 可 能 有 其 他 标签 。 


面 ， 并 通过 提供 新 的 HTML 来 重新 定义 用 户 界 


标签 被 组 织 成 一 个 树 状 结构 。 树 的 根 节点 是 标 


鸭 的 根 节点 。 


Web 页 面 的 DOM 表 示 也 是 一 个 树 状 结构 ， 


由 元 素 或 节点 组 成 ， 节 点 还 可 能 包含 很 多 的 子 


来 公开 当前 Web 页 面 的 根 节点 ， 这 个 变量 是 所 


可 扩展 的 标记 语言 (Extensible Markup 


来 描述 数据 结构 的 一 种 语 


XML 的 优势 在 于 其 通用 性 和 较 强 的 表达 能 
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实际 上 ， 在 Ajax 最 初 的 定义 中 ，XML 是 作为 一 个 客户 端 与 服务 器 端的 通信 载体 出 现 的 。 例 如 
可 以 将 客户 端 对 服务 器 端的 请 求 用 XML 包装 起 来 ， 也 可 以 将 客户 端 提交 的 一 个 表单 内 容 转化 成 一 个 
XML 片段 传 给 服务 器 端 进行 处 理 。 下 面 的 XML 片段 可 以 代表 一 个 注册 表单 提交 的 内 容 ， 代 码 如 下 : 


<id>Richard</id> 


<password>passl</password> 
<sex> 男 </sex> 
<email>richard@hotmail.com</email> 
<address> 北 京 海淀 区 上 地 路 </address> 


在 Ajax 中 使 用 XML 的 另 一 个 原因 是 ， 它 可 以 进一步 降低 客户 端 和 服务 器 端的 耦合 性 。 由 于 
XML 的 中 立 性 ， 客 户 端 和 服务 器 端 使 用 的 开发 语言 、 平 台 等 一 些 细节 都 有 自由 选择 的 空间 ， 这 与 
客户 端 服务 器 架构 的 理念 是 一 致 的 ， 即 客户 端 和 服务 器 端 应 当 相 对 独立 。 


| 3 3 Ajax 技术 的 优 缺 点 分 析 


1， 优点 是 具有 更 迅捷 的 响应 速度 : 的 动作 ， 并 避免 了 在 网 络 上 发 送 那些 没有 改变 
(1) 传统 的 Web 应 用 允许 用 户 填 写 表单 : 过 的 信息 。 
(form)， 当 提交 表单 时 就 向 Web 服 务 器 发 送 一 ; (3) Ajax 不 需要 任何 浏览 器 插件 ， 但 需 


个 请 求 。 服 务 器 接收 并 处 理 传 来 的 表单 ， 然 后 | 要 用 户 允 许 JavaScript 在 浏览 器 上 执行 。 就 像 
返回 一 个 新 的 网 页 。 这 个 做 法 浪费 了 许多 带 ; DHTML 应 用 程序 那样 ，Ajax 应 用 程序 必须 在 众 
宽 ， 因 为 在 前 后 两 个 页 面 中 的 大 部 分 HTML 代 ; 多 不 同 的 浏览 器 和 平台 上 经 过 严格 的 测试 。 随 
码 往往 是 相同 的 。 由 于 每 次 应 用 的 交互 都 需要 ; 着 Ajax 的 成 熟 ， 一 些 简 化 Ajax 使 用 方法 的 程序 
向 服务 器 发 送 请 求 ， 应 用 的 响应 时 间 就 依赖 于 ; 库 也 相继 问世 。 同 样 ， 也 出 现 了 另 一 种 辅助 程 


服务 器 的 响应 时 间 。 这 导致 了 用 户 界面 的 响应 ; 序 设计 的 技术 ， 为 那些 不 支持 JavaScript 的 
比 本 地 应 用 慢 得 多 。 i 户 提供 替代 功能 。 

Ajax 可 以 把 以 前 一 些 由 服务 器 负担 的 工 : 2。 Ajax 的 缺点 
作 转嫁 到 客户 端 ， 利 用 客户 端 闲置 的 能 力 来 处 ; (1) Ajax 可 能 破坏 浏览 器 “后 退 ” 按 钮 的 


理 ， 从 而 减轻 服务 器 和 带宽 的 负担 ， 进 而 节约 : 正常 行为 。 在 动态 更 新 页 面 的 情况 下 ， 用 户 无 
空间 和 宽带 的 租用 成 本 。Ajax 应 用 可 以 仅 向 服 ; 法 回 到 前 一 个 页 面 的 状态 ， 这 是 因为 浏览 器 仅 
务 器 发 送 并 取 回 必需 的 数据 ， 在 客户 端 采 用 | 能 记 下 历史 记录 中 的 静态 页 面 。“ 后 退 ”按钮 
JavaScript 处 理 来 自 服务 器 的 响应 。 因 此 在 服 ; 是 一 个 标准 的 Web 站 点 的 重要 功能 ， 但 是 它 没 
务 器 和 浏览 器 之 间 交 换 的 数据 大 量 减少 ， 结 果 ; 法 和 JavaScript 进 行 很 好 的 合作 。 这 是 Ajax 所 
我 们 就 能 看 到 响应 更 快 的 应 用 。 同 时 很 多 的 处 : 带 来 的 一 个 比较 严重 的 问题 ， 因 为 用 户 往往 是 
理工 作 可 以 在 发 出 请 求 的 客户 端 机 器 上 完成 ， | 希望 能 够 通过 “后 退 ”按钮 来 取消 前 一 次 操作 
所 以 Web 服 务 器 的 处 理 时 间 也 减少 了 。 i 的 。 那 么 对 于 这 个 问题 有 没有 办 法 ? 答案 是 肯 
(2) 使 用 Ajax 的 最 大 优点 ， 使 Web 中 的 ; 定 的 ， 当 中 大 多 数 都 是 在 用 户 单 击 “ 后 退 ” 按 
界面 与 应 用 分 离 〈 也 可 以 说 是 数据 与 呈现 分 : 钮 访问 历史 记录 时 ， 通 过 建立 或 使 用 一 个 隐藏 
) ， 能 在 不 更 新 整个 页 面 的 前 提 下 维护 数 | 的 IFRAME 来 重 现 页 面 上 的 变更 。 
据 。 这 使 得 Web 应 用 程序 更 为 迅捷 地 回应 用 户 : 
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(2) 进行 Ajax 开发 时 ， 网 络 延 迟 即 用 户 发 ; (6) Ajax 的 安全 问题 。Ajax 技 术 在 给 用 
出 请 求 到 服务 器 发 出 响应 之 间 的 间隔 一 一 需要 : 户 带 来 很 好 的 体验 的 同时 也 带 来 了 新 的 安全 威 
慎重 考虑 。 不 给 予 用 户 明确 的 回应 ， 没 有 恰当 ; 胁 ，Ajax 技 术 就 如 同 对 企业 数据 建立 了 一 个 直 
的 预 读 数据 ， 或 者 对 XMLHttpRequest 的 不 恰 接 通道 。 这 使 得 开发 者 在 不 经 意 间 会 暴露 比 以 
当 处 理 ， 都 会 使 用 户 感到 延迟 ， 这 是 用 户 不 愿 ; 前 更 多 的 数据 和 服务 器 逻辑 。Ajax 的 逻辑 可 以 
看 到 的 ， 也 是 他 们 无 法 理解 的 。 通 常 的 解决 方 | 对 客户 端的 安全 扫描 技术 隐藏 起 来 ， 人 允许 黑客 
案 是 ， 使 用 一 个 可 视 化 的 组 件 来 告诉 用 户 ， 系 统 | 从 远 端 服务 器 上 建立 新 的 攻击 。 还 有 Ajax 也 难 
正在 进行 后 合 操作 并 且 正 在 读 取 数 据 和 内 容 。 ; 以 避免 一 些 已 知 的 安全 弱点 ， 如 跨 站 点 脚步 攻 
(3) 现在 一 些 手 持 设备 〈 如 手机 、PDA 击 、SQL 注 入 攻击 和 安全 漏洞 等 。 
等 ) 还 不 能 很 好 地 支持 Ajax。 (7) 对 搜索 引擎 的 支持 比较 弱 。 如 果 使 用 
(4) 用 JavaScript 制 作 的 Ajax 引擎 ， | 不 当 ，Ajax 会 增 大 网 络 数据 的 流量 ， 从 而 降低 
JavaScript 的 兼容 性 和 DeBug 都 是 让 人 头痛 的 事 。 “| 整个 系统 的 性 能 。 
(5) Ajax 的 无 刷新 重 载 ， 由 于 页 面 的 变化 (8) 客户 端 过 肥 ， 太 多 客户 端 代码 造成 
没有 刷新 重 载 那么 明显 ， 所 以 容易 给 用 户 带 来 | 发 上 的 成 本 上 升 。 编 写 复杂 、 容 易 出 错 ; 宛 余 
困扰 户 不 太 清 楚 现在 的 数据 是 新 的 还 是 代码 比较 多 ， 再 加 上 将 以 往 的 很 多 服务 端 代码 
已 经 更 新 过 的 。 现 有 的 解决 方法 有 在 相关 位 | 放 到 了 客户 端 ， 破坏 了 Web 的 原 有 标准 。 
置 提示 、 数 据 更 新 的 区 域 设计 得 比较 明显 、 数 | (9) 对 串 流 媒体 的 支持 没有 Flash、Java 
据 更 新 后 给 用 户 提 示 等 。 Applet 的 效果 好 。 


不 同 的 浏览 器 使 用 的 异步 调用 对 象 也 有 所 不 同 ， 在 IE 浏 览 器 中 
异步 调 Eee 而 在 Netscape、Firefox 浏 览 器 中 
ae 因此 ， 在 不 同 浏览 器 中 创建 XMLHttpRequest 对 象 的 方式 也 有 
所 不 同 。 

在 IE 浏览 器 中 创建 XMLHttpRequest 对 象 的 方式 如 下 所 示 : 


Var xmlhttprequest = new activexobject ("microsoft.xmlhttp"); 


在 Netscape 浏 览 器 中 创建 XMLHttpRequest 对 象 的 方式 如 下 所 示 : 


Var xmlhttprequest = new xmlhttprequest () 7 


由 于 无 法 确定 用 户 使 用 的 是 什么 浏览 器 ， 所 以 在 创建 XMLHttpRequest 对 象 时 ， 最 好 将 以 上 两 
种 方法 都 加 上 。 代 码 如 下 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 创 建 xmlhttprequest 对 象 </title> 

<script language = "javascript" type = "text/javascript"> 
= 

Var zxmlhttprequest; // 定 义 一 个 变量 ,用 于 存放 xmlhttprequest 对 象 
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function createxmlhttprequest () // 创 建 zmlhttprequest 对 象 的 方法 

{ 

if (window.activexobject) // 判 断 是 否 是 ie 浏览 器 

{ 

xmlhttprequest = new activexobject ("microsoft.xmlhttp"); // 创 建 ie 浏 览 器 中 的 
xmlhttprequest 对 象 

else if(window.xmlhttprequest) / /判断 是 否 是 netscape 等 其 他 支持 xmlhttprequest 
组 件 的 浏览 器 

{ 

xmlhttprequest = new xmlhttprequest(); // 创 建 其 他 浏览 器 上 的 xmlhttprequest 对 象 

} 


= 

</script> 

createxmlhttprequst (); // 调 用 创建 对 象 的 方法 
</head> 

<body> 

</body> 

</html> 


“if(window.ActiveXObject)” 用 来 判断 是 否 使 用 IE 浏 览 器 。 其 中 ActiveXOject 并 不 是 
Windows 对 象 的 标准 属性 ， 而 是 IE 浏 览 器 中 专 有 的 属性 ， 可 以 用 于 判断 浏览 器 是 否 支 持 ActiveX 控 
件 。 通 常 只 有 IE 浏 览 器 或 以 IE 浏 览 器 为 核心 的 浏览 器 才能 支持 Active 控 件 。 

“else if(window.xmlhttpRequest)” 是 为 了 防止 一 些 浏览 器 既 不 支持 ActiveX 控 件 ， 也 不 支持 
XMLHttpRequest 组 件 而 进行 的 判断 。 其 中 XMLHttpRequest 也 不 是 window 对 象 的 标准 属性 ， 但 可 
以 用 来 判断 浏览 器 是 否 支持 XMLHttpRequest 组 件 。 

如 果 浏 览 器 既 不 支持 ActiveX 控 件 ， 也 不 支持 XMLHttpRequest 组 件 ， 那 么 就 不 会 对 
xmlhttprequest 变 量 赋值 。 


| 3 人 Ajax 中 Get 请 求 与 Post 请 求 的 区 别 


在 使 用 Ajax 时 ， 当 我 们 向 服务 器 发 送 数据 时 ， 可 以 采用 Get 方 
式 请 求 服务 器 ， 也 可 以 使 用 Post 方 式 请 求 服务 器 。 那 么 ， 什 么 时 候 该 采用 Get 方 式 ， 什 么 时 候 该 采 
Post 方 式 呢 ? 
(1) 使 用 Get 请 求 时 ， 参 数 在 URL 中 显示 ， 而 使 用 Post 方 式 ， 则 不 会 显示 出 来 。 
(2) 使 用 Get 请 求 发 送 数据 量 小 ， 使 用 Post 请 求 发 送 数据 量 大 。 
下 面 通过 实例 看 下 区 别 ， 页 面 的 HTML 代 码 : 


<!doctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 
<title></title> 
<style type="text/css"> 
{ 
margin:8px; 
} 
</style> 
</head> 
<body> 
<label for="txt username"> 
您 的 姓名 :</1label> 
<input type="text" id="txt username" /> 
<br /> 
<label for="txt age"> 


您 的 年 龄 :</1abel> 
<input type="text" id="txt age" /> 
<br /> 


<input type="button" value="GET" id="btn get" onclick="btn get click();" /> 
<input type="button" value="POST" id="btn post" onclick="btn post click();" /> 
<div id="result"> 
</div> 

</body> 

</html> 


客户 端 脚 本 代码 ，Get 请 求 的 代码 如 下 。 
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function btn get click() 1 
Var xmlhttp = window.xmlhttprequest ? 
new xmlhttprequest() : new activexobject ("microsoft.xmlhttp"); 
var username = document .getelementbyid ("txt username") -value; 
var age = document .getelementbyid("txt age") .value; 
// 添 加 参数 ， 以 求 每 次 访问 不 同 的 url, 以 避免 缓存 问题 
xmlhttp.open ("get", "server.aspx?username=" + encodeuricomponent (username) 
+ "&age=" + encodeuricomponent (age) + "&random=" + math.random()); 
xmlhttp.onreadystatechange = function () { 
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { 
document .getelementbyid("result") .innerhtml = xmlhttp.responsetext; 


} 
// 发 送 请 求 ， 参 数 为 nul1 
xmlhttp.send (null); 
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客户 端 脚本 代码 ，Post 请 求 的 代码 如 下 。 


function btn post click() { 
var xmlHttp = window.XMLHttpRequest ? 


new XMLHttpRequest() : new ActiveXObject ("Microsoft.XMLHTTP"); 


Var username = document .getElementById ("txt username") .value; 
Var age = document .getElementById ("txt age") .value; 
Var data = "username=" + encodeURIComponent (Username) 
+ "&age=" + encodeURIComponent (age); 
// 不 用 担心 缓存 问题 
XmlHttp -open ("post", "Server.aspzx", true); 


// 必 须 设置 ， 否 则 服务 器 端 收 不 到 参数 


xmlHttp. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); 


xmlHttp.onreadystatechange = function () { 
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 


document .getElementById ("result") .innerHTML = xmlHttp.responseText; 


} 

// 发 送 请 求 ， 要 data 数 据 

xmlHttp.send (data); 
} 


通过 上 面 的 代码 可 以 看 到 二 者 区 别 : 


(1) get 请 求 需 注 意 缓存 问题 ，post 请 求 不 需 担 心 这 个 问题 。 
(2) post 请 求 必须 设置 Content-Type 值 为 application/x-form-www-urlencoded。 


(3) 发 送 请 求 时 ， 因 为 get 请 求 的 参数 都 在 URL 里 ， 所 以 Send 函 数 发 送 的 参数 为 null， 


请 求 在 使 用 send 方 法 时 ， 却 需 赋予 其 参数 。 


而 post 


局 部 更 新 


| 3. O = 过 Ajax 的 异步 调用 获得 服务 器 端 数 据 之 后 ， 可 以 使 


We eh ee 常用 的 局 部 更 新 方式 有 以 下 3 种 。 
1. 表单 对 象 的 数据 更 新 
表单 对 象 的 数据 更 新 ， 通 常 只 要 更 改 表单 对 象 的 Value 属性 值 ， 其 语法 代码 如 下 所 示 : 


Formobject.value = "新 数值 " 


有 关 表单 对 象 的 数据 更 新 的 示例 ， 代 码 如 下 所 示 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 局 部 更 新 </title> 

<script language = "javascript" type = "tezxt/javascript"> 
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之 间 


== 

function changeData() 

{ 

document .myForm.myText .value = "更 新 后 的 数据 " 

= 

</head> 

<body> 

<form name = "myForm"> 

<input type = "text" value = " 原 数据 " name = "myText"> 
<input type = "button"” value = "更 新 数据 " onclick = "changeData()"> 
</form> 

</body> 

</html> 


2， 匡 浏览 器 中 标签 间 文 本 的 更 新 
在 HTML 代 码 中 ， 除 了 表单 元 素 之 外 ， 还 有 很 多 其 他 的 元 素 ， 这 些 元 素 的 开始 标签 与 结束 标签 
往往 也 会 有 一 点 文字 ， 对 这 些 文字 的 更 新 ， 也 是 局 部 更 新 的 一 部 分 ， 代 码 如 下 所 示 。 


<p> 文 字 </p> 
<span> 文 字 </span> 
<div> 文 字 </div> 
<label1>3 文 字 </label> 
<b> 文 字 </b> 
<i> 文 字 </i> 


在 IE 浏 览 器 中 ，innerText 或 innerHTML 属 性 可 以 用 来 更 改 标 签 间 文本 的 内 容 。 其 中 innerText 


属性 
以 下 
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于 更 改 开始 标签 与 结束 标签 之 间 的 纯 文 本 内 容 ， 而 innerHTML 属 性 用 于 更 改 HTML 内 容 。 如 
代码 所 示 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 局 部 更 新 </title> 

<script language = "javascript" type = "text/javascript"> 
= 二 

function changeData() 
myDiv.innerText = "更 新 后 的 数据 "; 
} 

——> 

</script> 

</head> 

<body> 
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<div id = "myDive"> 原 数据 </div> 

<input type = "button" value = "更 新 数据 " onclick = "changeData ()"> 
</body> 

</html> 


3. DOM 技 术 的 局 部 刷新 

innerText 和 innerHTML 两 个 属性 都 是 IE 浏 览 器 中 的 属性 ， 在 Netscape 浏 览 器 中 并 不 支持 该 属性 。 
但 无 论 是 IE 浏 览 器 还 是 Netscape 浏 览 器 ， 都 支持 DOM。 在 DOM 中 ， 可 以 修改 标签 间 的 文本 内 容 。 

在 DOM 中 ， 将 HTML 文 档 中 的 每 一 对 开始 标签 和 结束 标签 都 看 成 是 一 个 节点 。 例 如 HTML 文 档 
中 有 一 个 标签 如 下 所 示 ， 那 么 该 标签 在 DOM 中 被 称 之 为 一 个 “节点 ”。 

<div id = “myDiv”> 原 数据 </div> 

在 DOM 中 使 用 getElementByld() 方 法 可 以 通过 id 属 性 值 来 查找 该 标签 (或 者 说 是 节点 ) ， 如 
以 下 语句 所 示 : 


Var node = document .getElementById ("myDiv"); 


在 一 个 HTML 文 档 中 ， 每 个 标签 中 的 id 属性 值 是 不 能 重复 的 。 因 此 ， 使 用 getElementByld() 方 
法 获得 的 节点 是 唯一 的 。 

在 DOM 中 ， 认 为 开始 标签 与 结束 标签 之 间 的 文本 是 该 节点 的 子 节点 ， 而 firstChild 属 性 可 以 获 
得 一 个 节点 下 的 第 1 个 子 节点 。 如 以 下 代码 可 以 获得 <div> 节 点 下 的 第 1 个 子 节点 ， 也 就 是 <div> 标 
签 与 </div> 标 签 之 间 的 文字 节点 。 


node.firstchild 


以 上 代码 获得 的 是 文字 节点 ， 而 不 是 文字 内 容 。 如 果 要 获得 节点 的 文字 内 容 ， 则 要 使 用 节点 的 
nodeValue 属 性 。 通 过 设置 nhodeValue 属 性 值 ， 可 以 改变 文字 节点 的 文本 内 容 。 完 整 的 代码 如 下 所 示 。 


<!doctype html> 


<html> 

<head> 

<meta charset="utf-8"> 

<title> 局 部 更 新 </title> 

<script language = "javascript" type = "text/javascript"> 
< 


function changeData() 

{ 

// 查 找 标签 (节点 ) 

Var node = document .getElementById ("myDiv"); 
// 在 DOM 中 标签 中 的 文字 被 认为 是 标签 中 的 子 节点 

// 节 点 的 firstchild 属 性 为 该 节点 下 的 第 1 个 子 节点 
//nodeValue 属 性 为 节点 的 值 ， 也 就 是 标签 中 的 文本 值 
node.firstchild.nodeValue = "更 新 后 的 数据 "; 
==> 

</script> 

</head> 

</html> 
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目前 主流 的 浏览 器 都 支持 DOM 技 术 的 局 部 刷新 。 


| 3 pM 一 个 完整 的 Ajax 实 例 


一 个 完整 的 Ajax 实 例 。 


实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>AJAX 实 例 </title> 
<script language="javascript" type="text/javascript"> 
< 

var xmlHttpRequest; // 定 义 一 个 变量 用 于 存放 XMLHttpRequest 对 象 
// 定 义 一 个 用 于 创建 XMLHttpRequest 对 象 的 函数 

function createXMLHttpRequest () 

{ 

if (window.ActivexXObject) 

上 

//IE 浏 览 器 的 创建 方式 
xmlHttpRequest = new ActivexObject ("Microsoft .XMLHTTP"); 
}else if (windew.XMLHttpRequest) 

4 

//Netscape 浏 览 器 中 的 创建 方式 
xmlHttpRequest = new XMLHttpRequest (); 

} 

} 

// 响 应 HTTP 请 求 状态 变化 的 函数 
function httpStatechange () 

{ 

// 判 断 异步 调用 是 否 完成 

if (xmlHttpRequest.readystate == 4) 

{ 
// 判 断 异 步调 用 是 否 成 功 , 如 果 成 功 开始 局 部 更 新 数据 


if (xmLHttpRequest .status == 200||xmlHttpRequest.status == 0) 
{ 
// 查 找 节点 
Var node = document .getElementById ("myDIV") 
// 更 新 数据 


node .firstChild.nodeValue = xmlHttpRequest .responseText; 
} 


Slee 
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运行 代码 的 效果 如 图 13-2 所 示 。 


13-2 Ajax 实例 


第 14 章 
导航 菜单 特效 案例 


本 章 导 读 

导航 菜单 是 网 站 重要 的 组 成 部 分 ， 
导航 菜单 的 设计 关系 着 网 站 的 可 用 性 和 
用 户 体验 ， 有 吸引 力 的 导航 能 够 吸引 用 
户 去 浏览 更 多 的 网 站 内 容 。 一 个 良好 的 
网 页 导航 系统 ， 不 止 要 把 它 设计 得 很 漂 
亮 ， 更 重要 的 是 能 够 带领 你 的 用 户 喜 留 
在 你 的 网 站 之 中 ， 让 访问 者 轻松 找到 他 
们 想 要 观看 的 内 容 。 


i 
技术 要 点 
@ 横向 展开 的 二 级 导航 菜单 
超 实用 的 JavaScript 下 拉 菜 单 
@ 下 拉 折 又 菜单 
@ 漂亮 的 分 类 导航 菜单 


@ 网 页 滑动 门 菜单 


实例 展示 


] | @ ] 下 面 制作 一 个 清新 的 横向 二 级 导航 菜单 ， 类 似 滑动 门 的 操作 风 


格 ， 当 鼠标 放 在 一 级 菜单 的 第 四 个 菜单 项 上 ， 就 能 展开 二 级 的 菜单 ， 这 种 菜单 适合 许多 网 站 的 使 
， 如 图 14-1 所 示 ， 具 体 步骤 如 下 。 


©S EE 


。 关于 我 们 
， 企 | 呆 闻 
。 到 [文化 


图 14-1 横向 展开 的 二 级 导航 菜单 
(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 CSS 代 码 定义 文字 的 样式 ， 如 图 


14-2 所 示 。 


Dw EI 
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ndexhtml” x ee 
| LR | 白 分 | 设计 ”交加 。 已。 村 时: 击 RH 巩 二 闫 导 生 过 划 基 . 


图 14-2 使 用 CSS 代 码 定义 文字 的 样式 
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<style type="text/css"> 

.suckerdiv { } 

.Suckerdiv ul { width: 120px; position: relative; } 

.Suckerdiv ul li ul { left: 120px; position: absolute; width: 140px; 
top: 0; display: none; } 

.Suckerdiv ul li ul Li ul { left: 159px; } 

.Suckerdiv ul li a { display: block; color: # 690; text-decoration: none; 
font:12px 宋体 ; background: #eee; line-height:25px; padding: 0px 10px; border: 
lpx solid #fff; border-bottom: 0; } 

.suckerdiv ul 1i a:visited { color: black; } 


.suckerdiv ul li a:hover{ color: white; background-color: #97c839; } 
.Suckerdiv .subfolderstyle { } 


.suckerdiv a.subfolderstyle:hover { background: #97c839 url() no-repeat center right; } 
</style> 


(2) 接着 在 <body> 和 </body> 之 间 输 入 如 下 JavaScript 代 码 ， 用 来 实现 展开 的 二 级 菜单 特 
效 ， 如 图 14-3 所 示 。 


Dw 四 
ZHI 有， 有 MO el(q 5589 BAW) Mo 

waarem 

[Ed 路 


图 14-3 输入 JavaScript 代 码 


<script type="text/javascript"> 
Var menuids = ["suckertreel"] 
function buildsubmenus () { 
for (var i = 0; i < menuids.length; i++) { 
Var ultags = document .getElementById (menuids [i]) .getElementsByTagName ("ul1") 
for (var t = 0; t < ultags.length; t++) { 
ultags [t] .parentNode.getElementsByTagName ("a") [0] .className = "subfolderstyle" 
ultags[t] .parentNode .onmouseover = function () { 
this.getElementsByTagName ("ul") [0] .style.display = "block"; 
this.firstchild.style.backgroundColor = 'green'7 
} 


ultags[t] .parentNode.onmouseout function () { 
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this.getElementsByTagName ("ul") [0] .style.display = "none" 
this.firstchild.style.backgroundColor = "; 


} 
if (window.addEventListener) 
window.addEventListener ("load", buildsubmenus, false) 
else if (window.attachEvent) 
window.attachEvent ("onload", buildsubmenus) 


</script> 


(3) 最 后 再 输入 如 下 的 div 和 列表 ， 如 图 14-4 所 示 。 


局 


HEATWS Yh 


; 
: 
昌 


图 14-4 输入 div 和 列表 


<div class="suckerdiv"> 
<ul id="suckertreel"> 
<1i><a href="#"> 关 于 我 们 </a></1i> 
<1i><a href="#"> 企 业 新 闻 </a></1i> 
<1i><a href="#"> 企 业 文化 </a></1i> 
<1i><a href="#"> 产 品 介绍 </a> 
<ul> 
<1i><a href="#"> 手 机 </a></1i> 
<1i><a href="#"> 笔 记 本 </a></1i> 
<1i><a href="#"> 数 码 相 机 </a></1i> 
<1i><a href="#"> 人 台式 机 </a></1i> 
<1Li><a href="#"> 打 印 机 </a></1i> 
<1i><a href="#"> 办 公 耗 材 </a></1i> 
</ul> 
</1i> 
</ul> 
</div> 
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14 超 实 用 的 JavaScript 下 拉 菜 单 一 。 
e@ 


横向 导航 是 网 页 中 最 常用 的 导航 方式 。 横 向 导航 符合 人 们 通 党 
的 浏览 习惯 ， 同 时 也 便于 页 面 内 容 的 排版 。 下 面 制作 一 个 实用 的 JavaScript 下 拉 菜 单 ， 当 鼠标 移 上 
菜单 就 会 显示 出 二 级 菜单 ， 这 是 由 CSS 和 JavaScript 共 同 实现 的 ， 如 图 14-5 所 示 。 


条 单 东单 2 菜单 4 


lS EE 他 大 并 
ep | 单 3 菜单 5 条 6 


图 14-5 实用 的 JavaScript 下 拉 菜 单 
(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 CSS 代 码 定义 文字 的 样式 ， 如 图 
14-6 所 示 。 
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图 14-6 CSS 代 码 定义 文字 的 样式 


<style type="text/css"> 

* { padding:0;margin:0; } 

body { 

font-family:verdana, sans-serif; 
font-size:14px; background-color: #FFF;} 
#navigation, #navigation li ul { 
list-style-type:none; } 

#navigation { } 

#navigation 1i { 

float:left; 
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(2) 接着 在 <head> 和 </head> 之 间 输 入 如 下 JavaScript 代 码 ， 用 来 实现 下 拉 菜 单 特效 ， 如 图 
14-7 所 示 。 


(3) 最 后 在 <body> 和 </body> 之 间 输 入 如 下 的 div 和 列表 代码 ， 用 来 显示 菜单 的 文字 ， 如 
14-8 所 示 。 


JavaSc 
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图 14-8 输入 如 下 div 和 列表 代码 


<ul id="navigation"> 

<1li onmouseover="displaySubMenu (this)" onmouseout="hideSubMenu (this)"> 
<a href="#"> 菜 单 1</a> 

<ul> 

<1i><a href="#"> 二 级 栏目 1</a></1i> 

<1i><a href="#"> 二 级 栏目 1</a></1i> 

<1i><a href="#"> 二 级 栏目 1</a></1i> 

<1i><a href="#"> 二 级 栏目 1</a></1i> 

</ul> 

</11> 

<1i onmouseover="displaysSubMenu (this)" onmouseout="hidesubMenu (this)"> 
<a href="#"> 菜 单 2</a> 

<ul> 

<1i><a href="#"> 二 级 栏目 2</a></1i> 

<1i><a href="#"> 二 级 栏目 2</a></1i> 

<1i><a href="#"> 二 级 栏目 2</a></1i> 

<1i><a href="#"> 二 级 栏目 2</a></1i> 

<1i><a href="#"> 二 级 栏目 2</a></1i> 
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Se 
| 4 3 折 和 至 菜 o 
@ 下 面 制作 一 个 下 拉 折 又 菜单 ， 当 单 击 鼠 标 时 可 以 展开 或 收缩 菜 


单 。 用 鼠标 单 击 主 菜单 的 时 候 会 向 下 展开 二 级 菜单 ， 如 图 14-9 所 示 。 


图 14-9 下 拉 折 全 菜单 
(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 CSS 代 码 来 定义 文字 的 样式 ， 如 


| 


14-10 所 示 。 


<style type="text/css"> 

.wrap-menu {width:778px; margin:0 auto; overflow:auto; width:300px; 
background:#F6F6F6; font:12px/1.5 Tahoma,Arial,sans-serif} 

.Wwrap-menu ul{ list-style:none; margin:0; padding:0;} 

-wrap-menu ul li{ text-indent:4em; white-space:nowrap; } 

.Wwrap-menu ul 1i h2{ cursor:pointer; height:100%; width:100%; margin:0 0 
lpx 0; font:12px/31px ' 宋 体 '; color:#fff; background:green;} 

.wrap-menu ul li at display:block; outline:none; height:30px; line- 
height:30px; margin:lpx 0; color:#1A385C; text-decoration:none;} 

.Wwrap-menu ul li img{ margin-right:10px; margin-left:-17px; margin-top:9px; width:7px; 
height:7px; background:url (/jscss/demoimg/201402/arrow.gif) no-repeat; border:none;} 

.wrap-menu ul 1i img.unfold{ background-position:0 -9px;} 

.Wrap-menu ul li a:hover{ background-color:#ccc; background-image:none;} 


</style> 
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图 14-10 输入 CSS 代 码 
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(2) 接着 在 <head> 和 </head> 之 间 输入 如 下 的 JavaScript 代 码 ， 用 来 实现 折 翅 菜单 特效 ， 如 
图 14-11 所 示 。 


sR 刘 堂 六 了 录 。。 一 合 


/* 绑 定 事件 */ 


_bindEnv: function (container) { 


var self = this, 
_config = self.config; 
$ (‘h2,a', container) .unbind( config.type); 
$ (‘h2,a', container) .bind( config.type, function(e){ 
if($ (this) .siblings(ul') .length > 0) { 
$(this).siblings('ul').slideToggle('slow') .end() .children('img'). 


toggleClass (unfold') 7 


} 
$ (this) .parent (1i') .siblings () .find ('u1') .hide () 


-end() .find (img.unfold') .removeClass (unfold'); 
_config.clickIitemCallBack && $.isFunction( config. 


clickItemCallBack) && config.clickIitemCallBack($ (this)); 


1); 
} 
}; 
</script> 


A 


图 14-11 输入 JavaScript 代 码 
来 显示 菜单 中 的 文字 ， 如 


IE: 


加 


14-12 所 示 。 


(3) 最 后 在 <body> 和 </body> 之 间 输 入 如 下 代码 ， 


zt) OW wR 


AD eM iO) 
a 
于 


了 。 瑟 。， 术 昂 下 天 本 


图 14-12 输入 代码 显示 菜单 中 的 文字 
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JavaScript 网 页 设计 与 网 站 特效 课 尝 六 录 。。 一 全 


调 风格 ， 当 鼠标 悬 停 于 菜单 时 还 可 以 显示 出 菜单 背景 动态 效果 。 使 用 了 两 张 


| | : 西 二 
| / 示 郊 
[a 14-13 所 示 为 制作 好 的 分 类 导航 菜单 ， 该 菜单 采用 了 暖色 


片 来 修饰 菜单 的 样 


加 


网 


式 。 这 款 用 于 分 类 信息 网 站 的 菜单 可 布局 在 网 页 的 右 侧 或 类 似 的 地 方 。 


出 


图 14-13 分 类 导航 菜单 
(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 输 入 如 下 CSS 代 码 来 定义 文字 的 样式 ， 如 
14-14 所 示 。 


Dw Be. tol-lol x] 
Ze mii] EY EN EM WIO) EHO aly CW we 

moe 

上 ETEIEEE [3 


图 14-14 ”CSS 代码 定义 文字 的 样式 


<style type="text/css"> 

* {margin:0; padding:0; list-style:none;} 

body{font-size:12px; margin:50px;} 

#info{border:1lpx solid #BCFF1D; width:348px; 

background:#D6FF8C url (background.gif) no-repeat left top; 
float:left; } 

#info ul{ margin:5px;width:338px} 

#info 1i{ width:33%; height:40px; float:left;} 

#info li a{ font-size:12px font-weight:normal; line-height:35px; 
display:block;color:#000; text-decoration:none; padding-left:40px; 
background:url (menu.gif) no-repeat;} 

#info 1i a:link,#info 1i a:visited{background-position:center top;} 
#info 1i a:hover,#info 1i a:active{background-position:center bottom;} 


</style> 
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(2) 最 后 在 <body> 和 </body> 之 间 输 入 如 下 代码 ， 用 来 显示 导航 文字 ， 如 图 14-15 所 示 。 


Dw Le 


图 14-15 输入 代码 显示 导航 文字 


<div id="info"> 
<ul> 
<1i></1i> 
<li><a href="#" target=" blank"> 我 要 出 租 </ a></1i> 
<liS<a hreof="4" target=" blank"> 我 要 求 租 </a></1i> 
<1i><a href="#" target=" blank"> 二 手 房 买卖 </a></1i> 
<1i><a href="#" target=" blank"> 招 聘 求职 </a></1i> 
<1i><a href="#" target="” blank"> 车 辆 买卖 </a></1i> 
<1i><a href="#" target=" blank"> 商 务 服务 </a></1i> 
<1i><a href="#" target=" blank"> 教 育 培 训 </a></1i> 
<1i><a href="#" target="”blank"> 商 品 交 换 </a></1i> 
</ul> 
</div> 


| A， Se 网 页 滑动 门 菜单 
下 面 制作 一 款 风格 简洁 的 网 页 滑动 门 菜单 ， 如 图 14-16 所 示 ， 


et CSS 实 现 。 滑 动 门 菜单 ， 即 只 需 鼠 标 放 上 去 就 切换 的 菜单 ， 它 和 网 页 
选项 卡 只 是 在 操作 形式 上 存在 不 同 而 已 。 将 滑动 门 改 选项 卡 只 需 将 门 菜单 中 的 onmouseover 换 成 
onclick 就 行 了 ， 这 样 转换 之 后 ， 切 换 内 容 需要 用 鼠标 单 击 门 菜 单 才 可 以 实现 。 


© BE TT ET 


新 闻 ， 生活 ， 房产 ， 旅游 
据 介 绍 ，， 今年 9 月 底 ， 机 区 两 


区 卫生 服务 
rt 参 
保 居民 可 选择 1 名 全 科 医 生 ， 签 订 不 少 
于 1 年 的 服务 协议 。 


图 14-16 滑动 门 菜单 
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JavaScript 网 页 设计 与 网 站 特效 畏 下 芭 本 < 
(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 CSS 代 码 定 义 文字 的 样式 ， 如 图 
14-17 所 示 。 


Dw EE 
交 件 月。 坊 汤 量 、 二 二 IV) 手 和 ) 知 SxM) 从 ED) 诗人 $O 
indechim 
EE 3 
ortype nent> 
<htnb> 
head> 
meta charset-"usf-e"> 


citte> 网 下 油 动 [ 这 单 </ ticle> 


已 
得 
3 
站 
他 
外 
器 


图 14-17 CSS 代 码 定义 文字 的 样式 


<style> 

* {list-style-type:none; font-size:14px; text-decoration:none; margin:0; padding:0;} 
.tab{ margin:20px; width:244px; height:200px; overflow:hidden; border:lpx #aaccee solid;} 
.tab bf overflow:hidden; margin:5px; } 

.menu{overflow:hidden; } 

-menu li{ display:block; float:left; display: list-item; text-align:center; width:60px; 
background-color:#edf4fc;line-height:20px; border-bottom:1lpx #aaccee solid; 
border-right:lpx #aaccee solid; } 

-menu li af display:block;} 

.menu d{border-bottom:1lpx #ffffff solid;background-color:#ffffff; } 

.tab ul li.aaa{background: #ffffff;border-bottom:O0px #ffffff solid;} 
</style> 


(2) 在 <body> 和 </body> 之 间 输 入 如 下 的 JavaScript 代 码 ， 用 来 实现 滑动 门 特效 ， 如 图 14-18 
所 示 。 


‘Dw EE - ©@l-lol x | 
文件 (月 稀 蜗 (E)】 吾 看 [V) 看 ID 个 党 (M) 冯 世 (0) 人 41O 关 (s) 大 DO 


Ea 


background-color :EDF4FC; Line-hetght:29px; border-botton: 1px #AACCEE sotidiborder-right:lpx “| 
#AACCEE solid; 
-nany 11 a dtsplay:block:} 


.nn sborder -botton: lpx srFFFFF solid;backaround-color:#FFFFFF; } 
-tab ul Li.332[background: #FFFFFFiborder-botton:6pwx 3FFFFFF solid;} 


号 过 城中 避 天 口上 


FEE se 


图 14-18 输入 JavaScript 代 码 ， 用 来 实现 滑动 门 特 效 
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<script language="javascript"> 
function tabs (n) 

{ 

Var len = 4; 

for (var i = 1; i <= len; i++) 


下 


document .getElementById('tab a' + 1i) .style.display = (i == n) ? block : 
none'; 

document .getElementById('tab ' + i).className = (i == n) ? 'aaa' : none’; 

} 

} 

</script> 


(3) 最 后 在 <body> 和 </body> 之 间 输 入 如 下 代码 ， 用 来 显示 滑动 菜单 和 文字 ， 如 图 14-19 所 示 。 


Dw Be- 国 0DLIelx| 


tp 家 呈 F) 坪 硬 WV) 项 和 (D 者 本 IM) 柯 ziO 所 SIO 站 SS 本 DOW Eh 


图 14-19 显示 滑动 菜单 和 文字 


<div class="tab"> 

<ul class="menu" id="menutitle"> 

<1i idh'tab 1" class-"aaa'’><a hre 全 javascript:void(0)”onclick='tabs (1) ;" > 新闻 </a></1i> 

<1i id="tab 2" ><a href="javascript:void(0)" onmouseover="tabs (2') ;" > 生活 </a></1i> 

<1li id="tab 3" ><a href="javascript:void(0)" onmouseover="tabs ('3) ;” > 房产 </a></1i> 

<1i id="tab 4" ><a href="javascript:void(0)" onmouseover="tabs (4) ;” > 旅游 </a></1i> 

</ul> 

<div class="tab b" id="tab al" style="display:block;"> 据 新 闻 网 10 月 17 日 消息 ,， 美 
国 阿尔 肯 色 州 两 列 火车 相 撞 ， 目 前 已 造成 44 人 受伤 ， 其 中 5 人 伤势 严重 。 据 报道 ， 事 故 发 生 在 美国 阿肯色 州 
的 铁路 段 。 据 初步 调查 结果 显示 ， 一 列 搭载 旅客 的 列车 由 于 技术 故障 突然 停车 ， 同 时 一 列 货运 火车 沿 同一 轨 
道 驶 来 ， 两 列 火车 相 撞 ， 导 致 事故 发 生 。 此 外 ， 此 次 事故 导致 超过 10 吨 柴油 </div> 

<div class="tab b" id="tab a2" style="display:none;"> 据 介绍 ,今年 9 月 底 ， 杭 州 市 市 、 
区 两 级 政府 完成 了 医 养护 一 体 化 签约 服务 对 象 、 服 务 方式 、 服 务 内 容 、 服 务 费 用 及 医保 政策 等 相关 配套 政策 
的 制定 。 医 养护 一 体 化 全 科 签约 服务 以 社区 卫生 服务 机 构 为 平台 ， 各 级 医疗 卫生 机 构 纵 向 协作 服务 体系 为 支 
撑 ， 参 保 居民 可 选择 1 名 全 科 医 生 ， 签 订 不 少 于 1 年 的 服务 协议 。</div> 
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<div class="tab b" id="tab a3"” style="display:none;"> 央 行 9 月 30 日 发 布 了 关于 放松 住 
房 信贷 政策 的 通知 ， 宣 布 房贷 认定 新 标准 ， 并 重申 贷款 购买 首 套 普通 自 住房 ， 贷 款 利率 最 低 可 打 7 折 。 受 “ 限 
购 ” 解 除 和 信贷 放松 政策 双重 影响 ， 各 “ 解 限 ”城市 成 交 略 有 回升 。 专 业 人 士 表示 ， 随 着 此 次 楼 市 调控 政策 
“ 见 底 ”， 此 前 持续 “向 下 ”的 楼 市 或 将 进入 “缓冲 期 ”。 业 内 人 士 认 为 ， 能 否 带 动 成 交 量 大 增 ， 仍 要 看 银 
行 的 执行 力度 ， 这 一 效果 将 在 四 季度 逐步 释放 。</div> 

<div class="tab p"” id="tab a4”style="display:none;"> 敬 各 庄 是 野 三 坡 境 内 具有 完善 旅 
游 产业 链条 的 民俗 村 之 一 ， 这 个 民俗 村 已 脱离 了 原始 的 民俗 ， 是 一 处 具有 徽 派 装饰 风格 ， 现 代 化 的 经 营 理念 
的 住宿 集中 地 。 苟 各 庄村 距离 百 里 峡 售票 处 1000 多 米 ， 步 行 只 需要 大 约 10 分 钟 左 右 即 可 到 达 。 这 里 有 风景 如 
画 的 百 里 画廊 ， 有 清澈 见 底 拒 马 河 ， 有 着 让 人 尽情 宣泄 的 马场 ， 有 着 原始 自然 的 漂流 ， 有 惊险 刺激 的 华 索 、 
蹦极 。</div> 

</div> 
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文字 和 图 片 特效 案例 


本 章 导 读 

JavaScript 的 网 页 特效 运用 在 很 多 
方面 ， 能 够 实现 绚丽 多 彩 的 特殊 效果 。 
根据 效果 的 基本 性 质 大 概 可 以 分 为 文字 
特效 、 图 片 特 效 、 页 面 特效 等 。 网 页 在 
最 开始 的 时 候 ， 主 要 的 内 容 就 是 文字 ， 
因此 文字 特效 在 网 页 中 是 数不胜数 的 。 
图 片 的 出 现 ， 使 得 网 页 变 得 更 加 的 丰 
富 ， 图 片 特 效 也 很 多 ， 图 片 本 身 具有 丰 
富 的 信息 ， 再 加 上 一 些 效果 ， 会 使 得 网 
页 更 加 具有 吸引 力 。 


技术 要 点 
JavaScript 实 现 3D 文 字 
飞翔 的 3D 文 字 效果 

3D 旋 转 的 文字 

围绕 鼠标 转动 的 跟随 文字 
电 标 移 上 时 放大 图 片 

图 片 切换 效果 

网 站 横幅 焦点 图 切换 
百叶 窗 图 片 切换 


9 
9 
9 
9 
9 
9 
9 
9 


人 全 人 8 


JavaScript 网 页 设计 与 网 站 特效 因 站 到 本 < 


SS 


百叶 窗 图 片 切换 


] 5 ] JavaScript 实 现 3D 文 字 o 
o 


Photoshop 可 以 制作 超 酷 时 尚 的 3D 文 字 ， 但 是 其 制作 的 步骤 比 
较 繁 琐 。 利 用 JavaScript 也 可 以 实现 3D 文 字 特 效 ， 如 图 15-1 所 示 。 这 里 主要 是 使 用 JavaScript 与 
CSS 配 合 实现 的 效果 ，JavaScript 部 分 是 核心 ， 在 JavaScript 中 修改 要 显示 的 文字 内 容 即 可 。 


图 15-1 JavaScript 实 现 3D 文 字 
JavaScript 实 现 3D 文 字 的 代码 如 下 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>javascript3d 文 字 </title> 
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<script language=javascript> 
phrase="javascript3d 文 字 特 效 "; 
balises= 
nb=phrase.1length; 
layer=8; 
si=10; 
for (x=0;x<nb;x++){ 
forl(y=0;y<layer;++y) { 
balises=balisest+'<div id=1'+x+y+' style="font-weight: bold; font-size: 70px; 
left: '+si+'px; width:5px; color: rgb(195,195,0); font-family: courier new; 
position: absolute; 
font-family: courier new; top: 100px">'+phrase.charat (x)+ '</div>'; 
Si=si+60; 
} 
document .write (balises); 
function max3d(){ 
for (x=0;x<nb;++x){ 
for (y=0;y<layer;++y){ 
Var ob=document .all ("l"+x+y); 
ob.style.posleft=ob.style.posleft-y-1; 
ob.style.postop=ob.style.postop+y*2+1; 
ob.style.color="rgb ("+ (30+y*35) + ","+ (y*20+30) + ",100)"; 


ob.style.fontsize=parseint (ob.style.fontsize)+15; 


} 
max3d(); 
</script> 
</head> 
<body> 
</body> 
</html> 


飞翔 的 3D 文 字 是 很 有 趣 的 效果 ， 文 字 一 个 个 动 起 来 。 利 
15-2 所 示 为 飞翔 


加 


蕉 


Flash 的 渐变 动画 可 以 制作 出 该 效果 。 利 用 JavaScript 也 可 以 制作 出 该 效果 。 
3D 文 字 效果 。 

(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 CSS 代 码 来 定义 文字 的 样式 ， 如 
15-3 所 示 。 


加 
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图 15-2 飞翔 的 3D 文 字 效果 


# 介 “三 晶 ”下 看) 证 和 II 起 这 Mi， 全 0) 二 9 至 DIM ml 


px Ar1atisans-ser1f3 
nones 


图 15-3 ”CSS 代码 定义 文字 的 样式 


<style type="text/css" media="screen"> 
bodyi 
background:#000; 
margin:0; 
overflow:hidden; 
padding:0; 
} 
Ey 
Color:#fff; 
font:bold 13px Arial,sans-serif; 
list-style: none; 
: 
af 
text-decoration:none; 
} 
</style> 


(2) 接着 在 <body> 和 </body> 之 间 输 入 如 下 JavaScript 代 码 ， 


加 


15-4 所 示 。 


来 实现 飞翔 的 3D 文 字 特 


图 15-4 飞翔 的 3D 文 字 


<ul> 
<li><a href="#"> </a></1i> 
#"> 翔 </a></1i> 


<li><a 
<li><a 
<li><a 
<li><a href="#">D</a></1i> 
<li><a href="#"> 文 </a></1i> 
<li><a href="#"> 字 </a></1i> 
</ul> 
</body> 
<script src="jqueryl.3.2.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
var x = new Array(); 
Var y = new Array(); 
var z = new Array(); 
Var items = $(1i'); 
function animate() 
{ 
for(i = items.length - 1; i >= 0; 1i--)1{ 


Var xVar = 50 + x[i] // zx 坐标 值 
var yVar = 50 + y[i] * z[i]++; // y 坐标 值 ， 移 动 到 显示 器 底部 
Var ZVar = 10 * 2Z[i]++; // z 坐标 值 


E(xVvar | xVar < 0 xvVar > 90I1| 
yVar < 0 | yVar > 90 
zVar < 0 | zVar > 1500) 


x[i]= Math.random() * 2 - 17 
y[i] = Math.random() * 2 - 1; 


Zi [Il = 2; 


SLS 
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$(items[i]) .css ("position",，"absolute") ; // 能 移动 文本 向 前 走 
$(items[i]) -css("top"，xVart+"s") 7 // y 坐标 值 
$(items[i]) -css("left"，yYVar+"s"); // x 坐标 值 

$ (items[i]) -css("fontSize"，zVar+"s") 7 // 字号 

$ (items[i]).css("opacity", (zVar) /3000); 


. 
setTimeout (animate, 30); 
} 
animate () 7 


</script> 


JavaScript 实 现 3D 文 字 旋 转 有 空间 立体 感 ， 如 图 15-5 所 示 。 文 


字 围 绕 一 A 当前 文字 变 大 号 ， 转 动 后 变 为 小 号 ， 形 成 由 近 及 远 的 感觉 ， 从 而 形成 空间 
、 eed 可 以 变 大 或 变 小 ， 以 使 这 种 3D 效 果 更 加 有 空间 纵深 感 。 


Je 王 现 - 多 安全 浏 让 十 交 伯 月 者 (V) 5 带 B) 工 得 ( 加 和 | 首 一 口 | xX 


i 


机】 
于 


图 15-5 3D 旋 转 的 文字 
JavaScript 实 现 3D 旋 转 的 文字 代码 如 下 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>3d 旋 转 文字 </title> 
<script language=javascript> 
phrase="3d 旋 转 文字 ! " 
balises="" 
taille=40; 
midx=100; 
decal=0.5; 
nb=phrase.1length; 
y=-10000; 
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ght: 


for (x=0;x<nb;x++){ 
balises=balises + <div id=]' + x + ' style="width:3;font-family: courier new;font-wei 
bold;position:absolute;top:40; left:50;z-index:0">' + phrase.charat (x) + </div> 
} 
document .write (balises); 
time=window.setinterval ("alors ()",10); 
alpha=5; 
i alpha=0.05; 
function alors(){ 
alpha=alpha-i alpha; 
for (x=0;x<nb;x++){ 
alphal=alphatdecal*x; 
cosine=math.cos (alphal); 
ob=document .all ("1"+x); 
ob.style.posleft=midx+100*math.sin(alphal)+50; 
ob.style.zindex=20*cosine; 
ob.style.fontsize=taille+25*cosine; 
ob.style.color="rgb("+ (27+cosine*80+50) + ","+ (127+cosine*80+50) + ",0)"; 


} 
</script> 
</head> 
<body> 
</body> 
</html> 


15. 4 绕 鼠 标 转动 的 跟随 


在 一 些 网 站 中 常 出 现 ， 当 鼠 标 在 网 页 上 移动 时 ， 有 一 段 文字 或 
图 片 总 是 跟着 鼠标 ， 除 非 把 鼠标 移出 页 面 ， 否 则 它 就 总 是 紧 跟 鼠 标 不 放 的 现象 。 你 知道 这 种 


Wheel 其 实 是 用 JavaScript 编 一 段 小 程序 来 实现 的 ， 该 程序 不 长 ， 也 比较 好 理 


解 。 


15-6 所 示 为 制作 的 围绕 鼠标 转动 的 跟随 文字 效果 。 


加 


0 e) ENEES 的 #Wavaso 六 ~ 0 | © Ea 文字 


图 15-6 ”围绕 饼 标 转动 的 跟随 文字 
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ele 刘 党 六 录 。。 一 全 
围绕 鼠标 转动 的 跟随 文字 的 代码 如 下 。 


@-e 第 15 章 有 ESEESREE 


JavaScript 网 页 设计 与 网 站 特效 因 让 芋 相 二 


| 3 2 了 
当 鼠 标 移动 到 图 片上 时 ， 显 示 放 大 的 图 片 ， 如 图 15-7 和 图 15-8 


所 示 。 这 里 使 用 了 floor() 方法 ， 执 行 的 是 向 下 取 整 计算 ， 它 返回 的 是 小 于 或 等 于 函数 参数 并 且 与 之 
最 接近 的 整数 。 


加 


图 15-7 原始 图 片 图 15-8 放大 图 片 
鼠标 移 上 时 放大 图 片 的 代码 如 下 。 
<html> 
<head> 
<title> 和 鼠标 移动 放大 图 片 </title> 
</head> 
<body> 


<input name="imagesl1" type="image" id="imagesl1l" src="l0go.jpeg" align="middle" 
border="0" onmousemove="move()" onmouseout="out () "> 
<script language="javascript"> 
Var w=imagesl .width; 
Var h=imagesl .height; 
imagesl.height = math.floor (h*0.5); 
imagesl.width = math.floor (w*0.5); 
function move() 
{ 
imagesl.height = h; 
imagesl .width = w; 
} 
function out() 
{ 
imagesl.height = math.floor (h*0.5); 
imagesl.width = math.foor (w*0.5); 
} 
</acript> 
</body> 
</html> 
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的 图 片 转 换 在 网 上 是 很 常见 的 ， 实 现 方法 也 很 简单 。 将 鼠标 放 在 
片 切换 ， 右 侧 的 大 图 片 和 左 侧 的 文字 说 明 一 起 切换 ， 如 图 15-9 至 图 


15.6 


@ 。 第 1 总 Ez 


图 片 切换 效果 


片 切 换 特效 是 比较 经 典 的 风格 ， 用 这 种 方式 进行 
图 片 左 侧 的 彩 条 上 ， 就 可 实现 图 
15-11 所 示 。 


JavaScript 图 


el BT EEC 本 


清凉 寺 


五 台山 清凉 寺 ， 位 于 中 台南 瓦 厂 村 东北 的 清 
凉 谷 ， 距 台 怀 镇 约 15 千 米 ， 清 凉 寺 坐 东 朝 
西 ， 按 中 国 传统 的 中 轴 对 称 格局 布置 ,中 轴 
线 上 有 五 层 大 惧 ， 神 堂 、 配 段 左右 对 称 ， 清 
凉 古 置 于 寺中 ， 布 局 严 证 ， 主 次 分 明 . 


图 15-9 图 片 切换 效果 1 


塔 院 寺 


培 院 寺 位 于 五 台山 台 怀 镇 黑 通 寺 南 侧 ， 是 五 
台山 著名 的 五 大 禅 处 之 一 。 这 里 原来 是 显 通 
专 的 塔 院 ， 明 代 重修 含 利 塔 后 独 成 一 所 , 因 
院内 有 大 白 塔 ， 故 名 塔 院 寺 。 兽 入 云天 的 大 
白 堪 ， 是 寺内 的 主要 标志 。 堪 身 揽 地 而 起 凑 
空 高 兽 ， 在 五 台山 群 亏 艇 拥 之 下 颇 为 壮观 ， 
人 们 把 它 做 为 五 台山 的 标志 . 


图 15-10 图 片 切换 效果 2 


,|e) EVEESH Yavascript 风 页 B 序 开发 D  O 


星 通 寺 


显 通 寺 始 建 于 汉 明 帝 永 平年 间 , 初 名 大 季 灵 
句 寺 。 北 需 时 有 所 扩建 ， 唐 大 宗 时 重建 ，, 易 
各 为 大 华 严 寺 。 明 太 祖 朱元璋 时 重修 ， 赐 额 


“大 显 通 寺 ”， 明 成 让 朱棣 品名 为 * 大 吉祥 显 通 
专 '， 明 神宗 朱 媚 多 再 赐 疾 为 "大 护 国 圣 光 永 
明寺 ”， 简 称 永 明寺 . 


图 15-11 图 片 切换 效果 3 


(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 有 


网 


15-12 所 示 。 


如 下 的 CSS 代 码 定义 文字 的 样式 ， 如 
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图 15-12 CSS 代 码 定义 文字 的 样式 
<style type="text/css"> 
*{margin:0;padding:0;list-style-type:none;} 
a,img{border:0;} 
body{font:12px "Helvetica Neue", Helvetica,STheiti, 微软 雅 黑 , 黑 体 ， 
Arial,Tahoma, sans-serif, serif} 
body{background:#f6f6f6} 
.fl{float :left} 


a{text-decoration:none} 


.Clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} 
.Clearfix{display:inline-block} 
*html .clearfix{height:1%} 
.Clearfix{display:block} 
/* m-banner */ 
.m-banner{padding:10px 10pPx 10px 0;height:239px;border:lpx solid #dedede; 
width:755px;margin:20px auto;} 
.mb-news{width:270px;padding:0 15px;line-height:1.8} 
.mb-news h4{word-break:break-all;word-wrap:break-word} 
.mb-news h4 a{font-size:18px;color:#8c3608;line-height:1.6; 
word-break:break-all;word-wrap:break-word} 
-mb-news p{font-size:14px;color:#444;margin-top:15px;overflow:hidden} 
.mb-news h4 a:hover{text-decoration:underline} 
.mb-img{width:455px;height:239px} 
.mb-inav{width:10px;margin-right:1px} 
.mb-inav li{width:10px;height:79px;margin-bottom:1px} 
.mb-inav li a{display:block;width:10px;height:79px;background:#bdbdbd} 
.mb-inav 1i a.cur{background:#671900} 
.mb-ibox{width:444px;height:239px;position:relative;overflow:hidden} 
.mb-ibox a{display:block;width:444px;height:239px;overflow:hidden;position:a 
bsolute;top:0;left:0; 
z-index:10;display:none} 


</style> 
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(2) 接着 输入 如 下 JavaScript 代 码 实现 切换 效果 ， 如 图 15-13 所 示 。 


JavaScript 网 页 设计 与 网 站 特效 国 让 下 想起 


_this.bannerstart (); 


过 


</script> 


图 15-13 ”实现 切换 效果 
(3) 接着 在 body 正 文中 输入 如 下 代码 ， 用 来 显示 要 切换 的 图 片 和 文字 ， 如 图 15-14 所 示 。 


DW pn mn Bn eA We) wo = Nar BOW 00 mm. 四 OL-lelz| 


二 
四 
划 
引 
四 
0 
本 
加 
加 
| 
加 
加 
四 
a 
= 
加 
四 


图 15-14 ”显示 要 切换 的 图 片 和 文字 


<div class="m-banner"> 
<div id="mb-itxt" class="mb-news fl"> 

<div style="display:block;"> 

<h4><a href="/"> 清 凉 寺 </a><a href="/"></a></h4> 

<p> 五 台山 清凉 寺 ， 位 于 中 台南 瓦 厂 村 东北 的 清凉 谷 ， 距 台 怀 镇 约 15 千 米 ， 清 凉 寺 坐 东 朝 
西 ， 按 中 国 传统 的 中 轴 对 称 格局 布置 ， 中 轴线 上 有 五 层 大 殿 ， 祥 堂 、 配 殿 左 右 对 称 ， 清 凉 古 置 于 寺中 ， 布 局 严 
谨 ， 主 次 分 明 。</p></div> 

<div style="display:none;"> 

<h4><a href="/"> 塔 院 寺 </a></h4> 

<p> 塔 院 寺 位 于 五 台山 台 怀 镇 显 通 寺 南 侧 ， 是 五 台山 著名 的 五 大 禅 处 之 一 。 这 里 原来 是 显 通 
寺 的 塔 院 ， 明 代 重 修 舍利 塔 后 独 成 一 寺 ， 因 院内 有 大 白 塔 ， 故 名 塔 院 寺 。 管 入 云天 的 大 白 塔 ， 是 寺内 的 主要 标 
志 。 塔 身 拔 地 而 起 凌空 高 答 ， 在 五 台山 群 寺 簇拥 之 下 颇 为 壮观 ， 人 们 把 它 作 为 五 台山 的 标志 。</p></div> 
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<div style="display:none;"> 
<h4><a href="/"> 显 通 寺 </a></h4> 
<p> 显 通 寺 始 建 于 汉 明 帝 永 平年 间 ， 北 魏 时 有 所 扩建 ， 唐 太宗 时 重建 ， 易 名 为 大 华 严 寺 。 明 太 祖 朱 
元 璋 时 重修 ， 赐 额 “ 大 显 通 寺 ”， 明 成 祖 朱棣 赐 名 为 “大 吉祥 显 通 寺 ”， 明 神宗 朱 刻 钧 再 赐 额 为 “大 护 国 圣 
光 永明 寺 ”， 简 称 永 明寺 。</p></div> 
</div> 
<div class="mb-img fl clearfix"> 
<ul id="mb-inav" class="mb-inav fl"> 
<li><a class="cur"></a></1i> 
<li><a></a></1i> 
<li><a></a></1i> 
</ul> 
<div id="mb-ibox" class="mb-ibox fl"> 
<a href="/" style="display:block;"><img width="440" height="239" src="001.jpg" /></a> 
<a href="/"><img width="440" height="239" src="002.jpg" alt="222" /></a> 
<a href="/"><img width="440" height="239" src="003.jpg" alt="333" /></a> 
</div> 
</div> 
</div> 


<div style="text-align:center;clear:both"> 


</div> 
| 站 网 站 横幅 焦点 图 切换 
@ 焦点 图 切换 效果 ， 对 前 端 来 说 ， 了 恐怕 再 熟悉 不 过 了 。 实 现 它 的 


方法 有 多 种 ， 这 里 使 用 JavaScript 版 的 图 片 切换 方法 ， 在 右 下 角 显 示 等 比例 的 缩 略 图 ， 缩 略图 调 
的 是 大 图 片 ， 整 体 唯美 ， 采 用 淡 入 淡出 的 方式 对 图 片 进 行 轮 播 ， 单 击 鼠 标 后 切换 ， 不 单 击 鼠 标 时 
自动 轮 播 ， 如 图 15-15 所 示 。 


国际 项 级 奢华 


帝 保罗 


图 15-15 ”网 站 横幅 焦点 图 切换 


(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 的 CSS 代 码 定义 文字 的 样式 ， 如 
15-16 所 示 。 


加 
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JavaScript 网 页 设计 与 网 站 特效 思 守 上 E 必 二 


Dw 三 - ER 
A RS EV BAD RM dio) SI eo 


名 3 闪避 


由 


图 15-16 ”CSS 代码 定义 文字 的 样式 


<style> 

.flashBanner {width:782px;height:502px;overflow:hidden;margin:0 auto;} 

.flashBanner{position:relative;} 

.flashBanner .mask{height:32px;line-height:32px;background-color: 
#000;width:100%;text-align:right;position:absolute;left:0;bottom:-32px; 
filter:alpha (opacity=70);-moz-opacity:0.7;opacity:0.7;overflow:hidden;} 

.flashBanner .mask img{vertical-align:middle;margin-right:10px; 
cursor:pointer;} 

.flashBanner .mask img.show{margin-bottom:3px;} 

</style> 


(2) 接着 输入 如 下 JavaScript 代 码 ， 用 来 实现 图 片 的 切换 效果 ， 如 图 15-17 所 示 。 


Dw EE Olel 
FI MD EV A PIM 和 RD S15) a I wi 
re a 
I :omrs E3 
设计 3 其 网 全， 全勤 ” 问 站 并 相生 = 要 0. 

nt 


RETETOITD 


图 15-17 输入 JavaScript 代 码 以 用 来 实现 图 片 的 切换 效果 


<script type="text/javascript" src="jquerymin.js"></script> 
<script type="text/javascript"> 
$ (function(){ 
$(".flashBanner") .each (function(){ 
var timer; 


$(".flashBanner -mask img") .click(function(){ 


244 


@ _。 第 15 意 Ez 


(3) 接着 在 body 正 文中 输入 如 下 div 代 码 ， 这 里 是 要 切换 的 图 片 路 径 ， 如 图 15-18 所 示 。 


JavaScript 网 页 设计 与 网 站 特效 世上 E 必 二 


ET ~ 
changeIng (show); 
31,3089); 


图 15-18 图 片 路 径 


<div class="flashBanner"> 
<a href="/"><img class="bigImg" width="782" height="502" /></a> 
<div class="mask"> 
<img src="11.jpg" uri="11.jpg" link="/" width="60" height="22"/> 
<img src="02.jpg" uri="02.jpg" link="/" width="60" height="22"/> 
<img src="03.jpg" uri="03.jpg" link="/" width="60" height="22"/> 
<img src="04.jpg" uri="04.jpg" link="/" width="60" height="22"/> 
<img src="05.jpg" uri="05.jpg" link="/" width="60" height="22"/> 
</div> 
</div> 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px MicroSoft YaHei';"> 
</div> 


15 8 百叶 窗 图 片 切换 


下 面 制 作 百 叶 窗 图 片 切换 特效 ， 切 换 的 方式 有 淡 入 淡出 渐变 、 
百叶 窗 渐变 、 坚 条 切换 等 形式 ， 也 就 是 每 次 图 片 变化 时 的 方式 都 是 不 一 样 的， 不 像 有 的 图 片 切 
换 ， 每 次 切换 图 片 都 是 一 种 效果 。 本 例 图 片 特效 更 具有 视觉 效果 ， 如 图 15-19 和 图 15-20 所 示 。 


= BE EPP :| | 和 


图 15-19 百叶 窗 图 片 切换 1 
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文子 和 图 片 特效 案例 


图 15-20 ”百叶窗 图 片 切换 2 


(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 的 CSS 代 码 来 定义 文字 的 样式 ， 
如 图 15-21 所 示 。 


Dw EE 
文 #(P。 输 富 (FE) 章 百 (Vj 插 和 (I) 个 故 (M) 六 式 (0) 合 S(C) 就 空 (S$) 查 POW 帮 史 (四 
re 


MEY jt jimmy sive alider, peck js 2 


名 
加 
z# 
El 
a 
| 22 
| 
种 


自 


Faerie 
图 15-21 CSS 代 码 定义 文字 的 样式 


<style> 

*{margin:0; padding:0; font-weight:inherit; font-style:inherit; font-size:100%; 

font-family:inherit; vertical-align:baseline} 

a img,a{outline:0; border:0} 

body{font-family: Helvetica, Tahoma, Arial, sans-serif; font-size:14px; 

line-height:24px; background:#fff} 

a{text-decoration:none; border:0;} 

a:hover{text-decoration:none;} 

/* 百叶 窗 panner */ 

#5slider-wrap{width:990px; height:334px;}/* 可 以 修改 宽 高 */ 

#slider{position: relative; width:990px; height:334px; background:#FFF;} /* 
可 以 修改 宽 高 */ 

#slider img{position:absolute; top:0; left:0; display:none; width:990px; 
height: 334px;}/* 可 以 修改 宽 高 +/ 


.nivoslider{position:relative;overflow: hidden;} 


247 


ET 识 尝 广东 。e 一 合 


-nivoSlider img{position:absolute; top:0px; left:0px} 

-nivoSlider a.nivo-imageLink{position:absolute; top:0px;display:block; left:0px; 

width:990px;height:334px;border:0;padding:0;margin:0;z-index:6;}/* 可 以 修改 宽 高 */ 

.nivo-slice {display:block;position:absolute;z-index:5;height:100%;} 

.nivo-box {display:block;position:absolute;z-index:5;} 

-nivo-caption{position:absolute; left:0; bottom:0; background:#000;width:990px; 

z-index:50; height: 40px; }/* 可 以 修改 宽 高 */ 

.nivo-caption p{width:990px;height: 40px; text-indent: -9999px}/* 可 以 修改 宽 高 */ 

.nivo-controlNav{position:absolute; left:50%; bottom:10px; z-index: 100;}/* 
可 以 修改 左右 上 下 间距 */ 

.nivo-controlNav a{position:relative; z-index:99; cursor:pointer;background:#074d91} 

.nivo-controlNav a.active{background:#ff6400;font-weight:bold} 

.nivo-controlNav a{display:block; color: #fff; width:30px; height:20px; 
line-height: 20px; text-align: center; margin-right:3px; float:left; overflow: 
hidden; }/* 可 以 修改 宽 高 */ 

.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;} 
/* 左 右 切 换 按 钮 ， 不 能 删除 ， 如 果 不 需 要 可 以 设 背 景 ， 删 除 会 引起 图 片 错 位 */ 

.nivo-directionNav a {display:block;width:30px;height:30px;text-indent:-— 
9999px;border:0;} 

a.nivo-nextNav {right:15px;} 

a.nivo-prevNav {left:15px;} 

</style> 


(2) 接着 输入 JavaScript 代 码 ， 用 来 实现 图 片 百 叶 窗 的 切换 效果 ， 这 里 有 两 个 是 jquery 文件 
的 引用 ， 如 图 15-22 所 示 。 


<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script> 
<script type="text/javascript"> 
jQuery (function($){ 
$ (window) .load (function() { 
$ (#slider') .nivoSlider({ 
directionNav: true, 
captionopacity: 0.4, 
controlNav: true, 
boxCols: 8, 
boxRows: 4, 
slices: 15, 
effect:'random', 
animSpeed: 500, 
pauseTime: 3000 }); 
nD); 
1); 
</script> 
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图 15-22 用 JavaSeript 代 码 实现 图 片 百 叶 窗 特效 
(3) 在 body 正 文中 输入 如 下 代码 ， 定 义 百叶 窗 图 片 的 路 径 和 名 称 ， 如 图 15-23 所 示 。 


图 15-23 输入 代码 以 定义 百叶 窗 图 片 的 路 径 和 名 称 


249 


第 16 章 


加 


本 章 导 读 

说 起 按钮 ， 不 得 不 先 提 一 下 链接 ， 
因为 在 大 部 分 人 看 来 ， 似 乎 按钮 与 链接 
差不多 ， 都 能 完成 一 个 页 面 的 跳 转 。 目 
前 在 网 页 中 普遍 出 现 的 按钮 可 以 分 为 两 
类 : 一 类 是 有 提交 功能 的 按钮 一 一 真正 
意义 上 的 按钮 ， 另 一 类 是 仅仅 表示 链接 
的 按钮 ， 在 这 里 将 其 称 为 “ 伪 按钮 ”。 
本 章 就 来 介绍 按钮 和 页 面 特效 的 制作 。 


技术 要 点 | 
背景 图 片 变色 的 按钮 | 
单 击 按钮 后 按钮 自动 消失 一 
闪烁 的 链接 

打开 链接 时 弹出 询问 确认 框 

在 页 面 顶部 显示 进度 条 效果 

网 页 定时 刷新 的 特效 

指定 弹出 窗口 的 位 置 

网 页 密码 保护 

鼠标 滑 过 的 列表 


9 
9 
9 
9 
@ 


© 
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实例 展示 


和 鼠标 滑 过 的 列表 


| A | 背景 图 片 变 色 的 按钮 : 
@ 会 变色 的 网 页 按钮 ， 一 个 使 用 背景 图 像 的 按钮 ， 均 基于 


JavaScript 实 现 。 当 鼠标 移 到 按钮 上 ， 按 钮 背景 图 片 就 会 改变 。 使 用 onMouseover 和 onMouseout 
实现 的 效果 ， 当 鼠标 移 上 按钮 的 时 候 ，JavaScript 就 能 动态 改变 按钮 的 背景 图 像 ， 如 图 16-1 所 示 。 


CAD we 中 四 三 


变 背 景 图 像 的 按钮 : 
鼠标 移 到 按钮 上 ,按钮 背景 


er na a 


图 16-1 背景 图 片 变色 的 按钮 
(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 的 CSS 代 码 来 定义 文字 的 样式 和 
背景 图 片 ， 如 图 16-2 所 示 。 


<style> 
.initial {background-image:url ("003.jpg") ;font-size: Opt;font-family:Impact;color:#0099CC;} 
</style> 


Dw 画 - OL-lel x] 
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图 16-2 CSS 代 码 定义 文字 的 样式 和 背景 图 片 
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TIDETEE 识 尝 实 东 。。-@ 
(2) 接着 在 <body> 和 </body> 之 间 输 入 如 下 代码 ， 用 来 实现 背景 图 片 变色 的 按钮 特效 ， 如 


16-3 所 示 。 


<table border="0" width="98%" cellspacing="0" cellpadding="0"> 
<tr> 
<td colspan="3" valign="top" align="left"><br> 
<p align="center"><font color="#3399FF" face=" 方 正 黄 草 简体 " size="30"><strong> 
变 背 景 图 像 的 按钮 :<br> 鼠 标 移 到 按钮 上 ， 按 钮 背景 图 会 改变 。</strong></font></p> 
<script> 
<!--if (document.images){ 
after=new Image () 
after.src="003.jpg" 
} 
function change (image) // 改 变 背 景 图 的 路 径 
{ 
Var el=event.srcElement 
if (el.tagName=="INPUT"&&el .type=="button") 
event.srcElement.style.backgroundImage="url"+" ("+image+")" 
=> 
</script> 
<br> <p align="left">gnbsp; 
<form onMouseover="change ('003.jpg')" onMouseout="change ('001.jpg')"> 
<div align="center"> 
<input type="button" value=" 按 钮 1" class="initial" style="cursor:hand"> 
<input type="button” value=" 按 钮 2" class="initial" style="cursor:hand"> 
<input type="button" value=" 按 钮 3" class="initial" style="cursor:hand"> 
</div> 
</form> 
<p></p> 
<p align="left">gnbsp;</p> 
</td> 
K/ 瑟 > 
</table> 
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图 16-3 ”实现 背景 图 片 变色 的 按钮 特效 


到 


16. 


印 ” 按 钮 后 ， 弹 出 打印 对 话 框 ， 而 此 时 的 “打印 ”按钮 消失 了 ， 什 么 也 看 不 到 了 。 这 其 实 是 使 


JavaScript 将 其 隐藏 了 ， 如 


@_。。 第 16 章 EoD 
单 击 按钮 后 按钮 自动 消失 9 


下 面 利 用 JavaScript 实 现 一 个 有 趣 的 按钮 效果 ， 在 单 击 “ 扣 


16-4 和 16-5 所 示 。 


的 书 JavaSc! 月 ~ 上 ‖ 碟 点 主 后 按 往 消失 


里 


效果 显示 


图 16-4 单 击 “打印 ”按钮 前 


图 16-5 单 击 “打印 ”按钮 后 


单 击 按钮 后 按钮 自动 消失 的 网 页 代码 如 下 。 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 点 击 后 按钮 消失 </title> 
<style type=text/css> 


DA 


font-size: 9pt; font-family: "宋体 " 


} 
body { 


margin-top: Opx; font-size: 9pt; margin-left: Opx; margin-right: Opx; font- 


family: "宋体 " 
} 
.Style2 { 


color: #000099; 


font-size: 40px; 
font-family: "华文 彩云 "; 


} 
.style3 { 


font-family: "华文 新 魏 "; 
font-weight: bold; 


font-size: 30px; 


color: #000099; 


} 
</style> 
</head> 


<body bgcolor=#fef4d9> 


<center> 


253 


JavaScript 网 页 设计 与 网 站 特效 A 党 实录 “~e_® 


<span class="style2"> 点 击 后 按钮 消失 </span> 


</center><br> 


<center> 
<table bordercolor=#cccc33 border=5 borderlight="green"> 
<tbody> 
关 相 太 宛 
<td align=middle><span class="style3"> 效 果 显 示 </span></td> 
</tr> 


SE 
<td class=p9 align=middle><div align="center"> 


<input onclick="this.style.visibility='hidden';window.print();" type=button 


value= 打 印 > 
</div> 
</td> 
</tr> 
</tbody> 
</table> 
</center> 
</body> 
</html> 


| 6 3 闪烁 的 链接 


文本 链接 是 最 常用 的 网 页 特效 。 下 面 制作 一 个 闪烁 的 文本 链 
接 ， 其 思路 就 是 生成 数组 函数 ， 遍 历 每 个 参数 ， 将 其 加 入 数组 成 为 一 个 元 素 ， 然 后 生成 颜色 数 


组 ， 以 秒 计算 的 颜色 变化 间隔 时 间 ， 链 接 的 颜色 就 会 交替 变化 了 ， 如 图 16-6 所 示 。 


SS crass vs p © | & Assia 


下 面 是 闪烁 的 链接 文字 


百度 网 易 新 浪 


图 16-6 ”闪烁 的 链接 
闪烁 的 链接 网 页 的 代码 如 下 。 


<html> 
<head> 

<style type="text/css"> 
< 


a {font-size: 24pt;text-decoration: none }--> 


</style> 
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| 6 打开 链接 时 弹出 询问 确认 框 一 。 


下 面 制作 打开 链接 时 弹出 的 询问 框 。 该 确认 框 询 问 访客 是 否 


认 前 往 相应 的 站 点 ， 如 图 16-7 所 示 。 


生 ] ENIE 在 写 的 书 JavaSct 月 ”C0 | 大 打开 链接 对 询问 
淘宝 网 


图 16-7 询问 访客 是 否 确认 前 往 
打开 链接 时 弹出 询问 确认 框 的 代码 如 下 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 打 开 链 接 时 询问 </title> 

</head> 

<body> 

<script> 

function winconfirm(){ 

question = confirm(" 将 转向 目标 站 ， 是 否 继续 呢 ? ") 
if (question != "0"){ 

window.open ("/") 

} 

. 

</script> 

<a href="#" onClick="winconfirm() ; return false;"> 淘 宝 网 </a> 
</body> 

</html> 


示 进 度 条 效果 


| 0 鸭 面 顶部 显 
一 个 在 页 面 项 部 显示 的 进度 条 效果 ， 就 像 在 智能 手机 上 浏览 


页 一 
候 ， 


样 ， gf 览 器 进度 条 一 般 都 在 屏幕 项 部， 呈现 为 一 条 极 细 的 小 线条 。 当 页 面 加 载 的 时 
它 就 不 断 地 加 载 显 示 进 度 。 本 网 页 进度 条 特效 与 此 十 分 相似 ， 基 于 jquery 插件 实现 的 效果 ， 如 


图 16-8 所 示 。 
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图 16-8 在 页 面 顶部 显示 进度 条 
在 页 面 项 部 显示 进度 条 实例 的 代码 如 下 。 


JavaScript 网 页 设计 与 网 站 特效 国 让 下 本 二 


16 6 网 页 定时 刷新 的 特效 3 


一 个 JavaScript 小 特效 可 以 让 网 页 定时 刷新 ， 如 图 16-9 所 示 。 
其 代码 对 时 间 的 运用 比较 多 一 些 ， 可 以 作为 不 错 的 参考 函数 ， 比 如 计算 秒 数 、 分 钟 数 以 及 时 间 差 等 。 


© BE EC 二 区 
这 里 定时 会 刷新 网 页 。 


图 16-9 网 页 定时 刷新 
网 页 定时 刷新 实例 的 代码 如 下 。 
<html> 
<head> 
<meta charset="utf-8"> 
<tit1le> 定 时 刷新 的 特效 </title> 
</head> 
<body> 
<b> 这 里 定时 会 刷新 网 页 。</b> 
<script> 
i 
var limit="0:10" // 这 里 设 定 定时 刷新 的 时 间 
if (document.images){ 
var parselimit=limit.split(":")  // 将 前 面 设 定 的 时 间 分 成 "分 "和 " 秒 "两 部 分 
parselimit=parselimit[0]*60+parselimit[1]*1  // 将 两 部 分 时 间 换算 成 总 共 需 要 计算 的 秒 数 
function begin(){ 


if (!document .images) // 如 果 浏 览 器 不 是 IE 
return // 则 退出 

if (parselimit==1) // 如 果 计时 时 间 已 到 
window.1location.reload() // 执 行 刷新 动作 

else{ // 否 则 

parselimit-=1 // 计 时 器 减 一 秒 
curmin=Math .floor (parselimit/60) // 计 算 当前 "分 钟 " 数 
cursec=parselimit%60 // 计 算 当 前 " 秒 " 数 
if (curmin!=0) // 如 果 有 "分 钟 "部 分 


curtime=curmin+" 分 "+cursec+" 秒 后 刷新 本 页 ! "”// 生 成 在 状态 栏 显示 剩余 时 间 的 内 容 
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else /7 否则 (剩余 时 间 小 于 一 分 钟 ) 
curtime=cursec+" 秒 后 刷新 本 页 ! " // 生 成 在 状态 栏 显示 剩余 秒 数 的 内 容 
window.status=curtime // 将 显示 内 容 写 进 状 态 栏 
setTimeout ("begin ()", 1000) // 设 定 下 一 秒 钟 的 延 时 

1 

下 

window.onload=begin // 开 始 计时 

Wt 

</script> 

</body> 

</html> 


16 / 指定 弹出 窗口 的 位 置 o 
@ 


经 常 上 网 的 朋友 可 能 会 到 过 这 样 一 些 网 站 ， 一 进入 这 类 网 站 的 
首页 立刻 会 弹出 一 个 窗口 ， 或 者 按 一 个 链接 或 按钮 弹出 窗口 ， 通 常 在 这 个 窗口 里 会 显示 一 些 注意 


本 功能 。 如 图 16-10 所 示 ， 指 定 了 弹出 窗口 的 位 置 。 


基本 语法 : 

window.open (pageURL, name, parameters) 
其 中 : 

pageURL: 为 子 窗口 路 径 。 

Name: 为 子 窗口 句柄 。 

Parameters: 为 窗口 参数 ， 各 参数 间 用 去 号 分 隔 。 


€ EAFESH YaascripAna PD” O | BREOOR) 
指定 弹出 窗口 位 置 


Bai 嫩 本 度 


图 16-10 指定 弹出 窗口 的 位 置 
指定 弹出 窗口 的 位 置 实例 的 代码 如 下 。 


项、 版 权 信息 、 警 告 、 欢 迎 光顾 之 类 的 话 或 者 作者 想 要 特别 提示 的 信息 。 使 用 JavaScript 代 码 
指定 弹出 窗口 的 位 置 ， 其 实 这 是 JavaScript 中 Windows.open 的 固有 参数 ， 只 需 简单 设 定 即 可 


[实现 
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<!doctype html> 


<html> 
<head> 
<meta charset="utf-8"> 
<title> 指 定 弹 出 窗口 位 置 (IE) </title> 
<script language="javascript"> 
= 
function winpop(){ 
window.open ("http://www.baidu.com",","top=100, left=100,width=500, height=200"); 
} 
让 二 
</script> 
</head> 
<body onLoad="winpop () "> 
指定 弹出 窗口 位 置 
</body> 
</html> 


| 6 8 网 页 密码 保护 


以 下 是 一 段 由 JavaScript 实 现 的 网 页 密码 保护 的 代码 ， 在 进入 
网 页 前 需要 在 弹出 框 中 输入 密码 才 可 以 ， 如 图 16-11 所 示 。 一 般 情况 下 ， 目 前 都 在 后 台 处 理 这 种 
功能 ， 用 户 输 入 用 户 名 和 密码 后 交 给 服务 器 处 理 ， 然 后 再 返回 信息 。 若 登录 无 误 就 可 看 到 某 些 内 
容 ， 这 里 设置 的 密码 是 admin12345。 


ET 


Ms 
和 EEE nkeng) 


图 16-11 网 页 密码 保护 
实现 网 页 密码 保护 实例 的 代码 如 下 。 


<!dqoctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


<title> 密 码 保护 相应 页 面 </title> 
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</head> 

<body> 

<script language="javascript"> 
function password() { 

Var testv = 1; 

var passl = prompt (' 请 输入 密码 (密码 是 adamin1234) :',"); 
while (testv < 3) 1{ 

if (!passl) 

history.go(-1); 

if (passl == "admin12345") { 
alert (' 密 码 正确 !) ; 

break; 

} 

testv+=1; 

Var passl = 

prompt (密码 错误 ! 请 重新 输入 :') ; 

} 

if (passl!="password" & testv ==3) 
history.go(-1); 

Feturn " "; 

} 

document .write (password ()); 
</script> 

</body> 

</html> 


| 9 鼠标 滑 过 的 列表 
@ 一 个 鼠标 滑 过 的 列表 效果 ， 也 可 认为 是 鼠标 的 移入 移出 ， 你 会 


发 现 有 光影 效果 划 过 ， 从 而 为 列表 增加 几 分 动感 元 素 ， 让 你 的 内 容 列表 更 加 生动 、 更 吸引 用 户 ， 
进而 获得 更 好 的 用 户 体验 ， 如 图 16-12 所 示 。 


图 16-12 ”和 饼 标 滑 过 的 列表 
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(1) 首先 在 HTML 文 档 的 <head> 与 </head> 之 间 ， 使 用 如 下 CSS 代 码 来 定义 文字 的 样式 ， 如 
16-13 所 示 。 


网 


<style> 

body,ul,h2,p{ margin:0; padding:0; font-family:" 微 软 雅 黑 "; background:#333;} 

li{list-style:none;} 

a{text-decoration:none;} 

#box{width:270px;padding:10px 1l0px 20px;overflow:hidden;margin:20px auto 0; 
border:lpx solid #FFF;} 

.internal{width:266px;float :left;} 

#box h2{height:38px;border-bottom:1lpx solid #ccc;padding-left:5px;} 

#box h2 strong{float:left; line-height:38px;color:#885050;} 

#box h2 a{float:right;width:52px;height:14px;font-size:12px;text-— 
indent:20px;color:#fff;line-height:12px; font-weight:normal;margin-top:10px;} 

#box li{height:30px;position:relative;border-bottom:lpx dashed #ccc;} 

#box 1i div,#box li p{height:30px;position:absolute;top:0;left:0;width:100%;} 

#box li p{background:#fff;opacity:0;filter:alpha (opacity=0);} 

#box li div a,#box li div span{line-height:30px;font-size:12px;height:30pzx;} 

#box 1i div a {float:left;padding-left:5px;color:#7F5454;width:185px;overflow:hidden; } 

#box li div span{padding-right:10px;float:right;color:#CF9494;} 


</style> 
Dw Sl-lol x 
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图 16-13 ”输入 CSS 代 码 定义 文字 的 样式 
(2) 接着 输入 JavaScript 代 码 ， 用 来 实现 鼠标 滑 过 特效 ， 如 图 16-14 所 示 。 


<script type="text/javascript"> 
window.onload=function() 
{ var d=document; 

Var oBox=d.getElementById (‘box'); 

Var aLi=oBox.getElementsByTagName ('1i'); 


var i=0; 


for (i=0;i<aLi.length;i++) 
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BE Hs. Ea Ol-lol x 


折 分 | 说。 天 4 当 绍 。 所 条 民 人 iaim 寺 E33 


-fanction() 


图 16-14 输入 JavaScript 代 码 
(3) 下 面 在 正文 中 输入 如 下 div 和 列表 ， 用 来 显示 文字 信息 ， 如 图 16-15 所 示 。 


Dw x 

ZH) gm) EE AD RM Wl) 0(O wus) DIM Sel 

me a 
再 | 产生 | 讼 让。 3 损 加 。 所 。 标 新 、 取 村 有 am 于 由 


中 有 玛 [5 相 渤 至 二 十 二 


ota 


图 16-15 输入 div 和 列表 


<div id="box"> 
<div class="internal"> 
<h2><strong> 今 日 信息 </strong><a href="javascript:;">more</a></h2> 
<ul> 
<11> 
<p></p> 
<div> 
<a href="javascript:;"> 教 孩子 做 个 好 主人 好 客 </a> 
<span>2015-09-10</span> 


</div> 
I 
SS 
<p></p> 
<div> 
<a href=-"javascript:;"> 中 国 成 功 发 射 遥 感 卫 星 二 十 二 号 </a> 
<span>2015-09-10</span> 


</div> 
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第 17 章 
广告 代码 特效 案例 


本 章 导读 

在 许多 网 站 上 ， 都 可 以 看 到 
动感 十 足 的 网 页 广告 。 这 些 网 页 
广告 吸引 着 客户 的 眼球 ， 快 速 有 
效 地 传递 着 各 式 各 样 的 信息 。 广 
告 已 经 渗透 到 了 互联 网 的 每 个 角 
落 ， 变 得 无 所 不 在 。 从 这 个 意义 
上 说 ， 广 告 已 经 成 为 网 页 的 重要 
组 成 部 分 。 


技术 要 点 

@ 漂浮 广告 代码 

@ 可 关闭 的 对 联 广告 
收缩 的 Banner 广 告 
悬浮 的 QQ 在 线 客服 
多 个 图 片 广告 交替 显示 
先 显 示 大 图 随后 自动 收 起 显示 小 图 
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实例 展示 


。 收缩 的 Banner 广 告 多 个 图 片 广告 交替 显示 


汪汪 广 生 
| | 漂浮 广告 1 
@ 漂浮 广告 是 指 存 在 于 网 站 页 面 上 的 以 漂移 形式 存在 的 广告 。 它 


可 以 是 图 片 ， 可 以 自动 适应 屏幕 分 辩 率 ， 不 被 任何 网 页 元 素 遮挡 ， 同 时 可 以 支持 多 个 图 片 漂浮 。 
该 类 型 的 广告 通常 是 为 了 达到 宣传 网 站 的 效果 ， 所 以 经 常 被 各 大 网 站 用 到 。 漂 浮 式 广告 就 像 永 
不 消失 的 幽灵 一 样 ， 在 浏览 网 页 的 时 候 ， 漂 浮 广 告 不 停 地 在 网 页 上 漂 来 漂 去 ， 因 为 它 在 不 停 地 漂 
动 ， 让 人 在 视觉 上 感觉 到 有 一 种 吸引 力 。 图 17-1 所 示 为 漂浮 广告 。 


国人 
6 从 四 全 EN 的 WVavaSaripr 朵 页 人 放 开 必 与 在 和 过 ,站 轨 TVL7Jndexhtml Q 硬 食 邓 共 - 遇 四 4 三 


图 17-1 漂浮 广告 
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if (xpos >= (width - woffset)) 
{Xxon = 07xpos = (width - woffset); } 
|} 
function start() 
{ imgl .visibility = "visible"; 
interval = setinterval (‘changepos()', delay); 
和 
function pause _ resume () 
1 
if (pause) 
{ clearinterval (interval); 
pause = false;} 
else 
{ interval = setinterval ('changepos ()', delay); 
pause = true; 
} 
上 
start (); 
</script> 
</body> 
</html> 


三 | 


| 7 可 关闭 的 对 
® 对 联 广告 比较 常见 ， 下 面 制 作 一 个 可 关闭 的 对 联 广告 ， 当 滚动 


鼠标 滚轮 或 拖 动 滚动 条 ， 对 联 广告 就 会 随 着 滚动 条 滚动 至 初始 位 置 ， 如 图 17-2 所 示 。 


图 17-2 ”可 关闭 的 对 联 广告 
打开 Dreamweaver 软 件 ， 在 <body> 正 文中 输入 如 下 代码 ， 用 来 实现 可 关闭 的 对 联 广告 ， 如 图 
17-3 所 示 。 
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ET- 3 


[an] tw 元 SE -本 汪汪 由 
Ws mo 天 > 大 -Df 
FRE 


图 17-3 可 关闭 的 对 联 广 告 


<script language=javascript> 

suspendcode="<div id=lovexinl style='z-index: 10; left: 6px; position: 
absolute; top: 105px; '><img src='close.gif' onclick='javascript:window.hide()' 
width='100' height='14' border='0' vspace='3' alt=' 关 闭 对 联 广告 '><a href='http://www. 
baidu.com/' target=' blank'><img src='ad.jpg' border='0'></a></div>" 

document .write (suspendcode); 

suspendcode="<div id=lovexin2 style='z-index: 10; left: 896px; position: 
absolute; top: 105px; '><img src='close.gif' onclick='javascript:window.hide()' 
width='100' height='14' border='0' vspace='3' alt=' 关 闭 对 联 广告 '><a href='http://www. 
baidu.com/' target=' blank'><img src='ad.jpg' border='0'></a></div>" 

document .write (suspendcode); 

//flash 格 式 调用 方法 

//<embed src='flash.swf' quality=high width=100 height=300 

type='application/x-shockwave-flash' id=ad wmode=opaque></embed> 

lastscrolly=0; 

function heartbeat (){ 

diffy=document .body.scrolltop; 

percent=.3* (diffy-lastscrolly); 

if (percent>0)percent=math.ceil (percent); 

else percent=math .floor (percent); 

document .all.lovexinl.style.pixeltop+=percent; 

document .all.lovexin2.style.pixeltop+=percent; 

lastscrolly=lastscrolly+percent; 

} 

function hide() 

{ 

lovexinl.style.visibility="hidden"; 

lovexin2.style.visibility="hidden"; 

} 

window.setinterval ("heartbeat ()",1); 


</script> 
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] @ 3 一 个 Banner 广 告 收缩 效果 ， 当 将 其 点 开 后 ， 网 页 显示 为 大 广 


告 ， 用 鼠标 单 


Et 


(1) 使 上 


“关闭 ”按钮 后 ， 广 告 会 收缩 上 去 。 此 效果 在 各 大 网 站 被 经 常 使 用 ， 如 图 17-4 所 示 。 


En 


图 17-4 收缩 的 Banner 广 告 
Dreamweaver 打 开 网 页 文档 ， 如 图 17-5 所 示 。 


DW xpyp mn wiv WAD Ham axlo ss'0 is0 sowm wm ss. Ea Olle *| 
dochen 上 ET | 
RA ole. es 了 
| | 闫 分 到 rt | 和 种 因 。 包 。 相 是 : 3 


a 本 国友 se vsmv 


图 17-5 使 用 Dreamweaver 打 开 网 页 文档 


(2) 在 网 页 的 <head> 与 </head> 之 间 输 入 如 下 所 示 的 代码 ， 如 图 17-6 所 示 ， 用 来 实现 收缩 的 


Banner 广 告 。 


<style type="text/css"> 
*{margin:0; padding:0;}/* 为 了 方便 直接 这 样 重 置 了 */ 


#main{margin:0 auto; width:960px;} 


#banner{display:none; margin:0 auto; width:980px; height:400px; 


background:url (banner.jpg) no-repeat; position:relative;} 
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#close{display:block; width:50px; height:22px; 


text-align:center; 


height:22px; border:lpx #ddd solid; background:#000; color:#fff; 


size:12px; float:right; cursor:pointer;} 
</style> 
<script type="text/javascript" src=" 

<script type="text/javascript"> 

$( 

function() 

{ 

$("#banner") .slideDown () 7 

var Up=function() {$ ("#banner") .slideUp (1500)} 

setTimeout (Up, 3000); 

$ ("#close") .click 

(function () 

{ 

$ ("#banner") .slideToggle 

(600, function() 

{ 


if($("#banner") .css ("display") == "none") 
{$ ("#close") .text ("打开 ") ; } 
else{ 


$ ("#close") .text ("关闭 "); 


</script> 


DWw xen win sim AM WM WAO) S30 wats) EOW wa0 


| 
也 
只 
瑟 


国 


jqueryl.3.2.js"></script> 


图 17-6 输入 代码 以 实现 收缩 的 Banner 广 告 
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(3) 在 <body> 正 文中 输入 如 下 的 div 代 码 ， 如 图 17-7 所 示 。 


Dw xen 5 日 sam SAW PaM) Elo) a9 Sa BOW sa 
incexhim 。 x 蜂 es Bs 
ED slr es jr Ae 

| 折 4 | 庆生 同 贱 入 3 


图 17-7 输入 div 代 码 


] 7 悬浮 的 QQ 在 线 客 服 o 
QQ 在 线 客服 功能 可 以 让 网 站 经 营 者 更 便捷 地 了 解 来 访 的 顾客 


情况 ， i 可 以 分 析 顾 客 需要 ， 进 而 优化 网 站 内 容 。 本 例 制 作 的 QQ 在 线 客服 ， 
平时 悬浮 在 网 页 的 两 侧 ， 当 鼠标 移 上 时 就 自动 展开 ， 非 常 实用 方便 ， 如 图 17-8 所 示 。 下 面 就 介绍 
怎样 给 网 站 制作 QQ 在 线 客服 。 


| 


在 找 天 的 ,> 


FE Ra | MR 


规划 设计 PROGi ms 


人 aa88 
a en 
a az 


而 ah 
AT es 
硒 af8 
EE 


i QQ 在 线 客服 
(1) 使 用 Dreamweaver 打 开 网 页 文档 ， 在 <head> 与 </head> 之 间 添 加 如 下 的 CSS 代 码 ， 如 


加 


17-9 所 示 ， 用 来 定义 悬浮 的 QQ 在 线 客 服 样式 。 


<style type="text/css"> 
-qqwid{width:142px;background-image:url (qq _ bg.gif);color:#000000;} 
.qqwid a{text-decoration:none;} 

.qqwid a:link{color:#000000;} 

.qqwid a:visited{color:#000000;} 

.qqwid a:hover{color:#FF0000;} 
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.qqwid a:active{color:#000000;} 

.qqwid .qqnei{margin-left:5px;margin-right:5px;line-height:25px;} 

.qqwid .qqnei img{margin-left:3px;margin-right:5px;vertical-align:middle;} 
.qqwid td{font-size:12px;height:25px;line-height:25px;} 

</style> 


Dw smn wa sav 5 CW 50H mm- Ea ol-lol*| 


EYAL YE 


ye pe | 产品 优势 ， 
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图 17-9 输入 CSS 代 码 
(2) 在 <body> 正 文中 输入 如 下 代码 ， 用 来 显示 悬浮 的 QQ 在 线 客服 ， 如 


9 sels) gCW an 画 - 本 0LleLx 


列 


17-10 所 示 。 


Dw ZeR RH。 二 到 MI A RelM) tr 
[二 | R am 同 。 司 。 f 
FM dbo hlactfu” pame="letefu” st patin 


soaolute Left: ar top; Lao “7 
六 147 | fmble horder="0” erlyeine:"0" celipwlire="0") 
时 


she rieht” eo efe-iaeasceptr 
cipts divelo (Letrand’) ,cue src 
Telose me” horaere 0 ?ay /7 
i 


| Catv hehtfo” me rightew stylerporition ~ 


图 17-10 ” 芋 浮 的 QQ 在 线 客服 


<table border="0" cellspacing: cellpaddin 


<tr> <td valign="top"> 
<table width="10" border="0" cellspacing="0" cellpadding="0" id="leftmenu"> 
<tr><td><a href="#" onclick="window.open (http://#',",'width=800,height=600 
;top=0, left=100, status=yes')"> 
<img src="qq Asall.jpg" border="0"></a></td> </tr> 
<tr><td><a target=" blank" href="http://sighttp.qq.com/authd?IDKEY=534e02 
3a34d2ce9548a6e7e0f92cd59c2bd5c36a2f7f25d6"><img src="qq Online.jpg"” border="0" 
></a></td></tr> 
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<tr><td align="right"><a href="javascript:" onclick="javascript:divclose('le 
Etmenu') ;"> 
<img src="close.jpg" ></a></td> </tr> 
</table> </td> </tr> 
</table> 
</div> 
<div id="rightfu" name="rightfu" style="position:absolute;right:1px;top:125px;"> 
<table border= 
<tr> 


0" cellspacing="0" cellpadding="0"> 


<td valign="top"> 
<div class="qqwid" id="showrightmenu 1” style="filter:alpha (opacity=80);z- 


index:1; display:none;" onmouseover="javascript:showrightmenuover(1);" onmouseo 
ut="javascript:showrightmenuout (1);"> 
<div><img src="qq top.gif"></div> 
<div class="qqnei"> 
<table border="0" cellspacing="0" cellpadding="0" style="filter:alpha (opa 
City=86) 7"> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target="_ 
blank"> 在 线 客服 </a></td> </tr> 
<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target="_ 
blank"> 在 线 客服 </a></td> </tr> 
<tr> <td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 
<a href="http://wpa.qq-com/msgrd?v=3&uin=23132&site=#&menu=yes" target=" 
blank"> 在 线 客服 </a></td> </tr> 
<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target="_ 
blank"> 在 线 客服 </a></td></tr> 
<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" 
target=" blank"> 在 线 客服 </a></td></tr> 
<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" border="0" 
align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target="_ 
blank"> 在 线 客服 </a></td></tr> 
<tr><td><img src="http://wpa.qq:com/pa?p=1:23132:17" height="17" align="middle"> 
<a href="http://wpa.qq-.com/msgrd?v=3&uin=23132&site=#&menu=yes" target="_ 
blank"> 在 线 客服 </a></td></tr> 
<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 
<a href="http://wpa.qq-.com/msgrd?v=3&uin=23132&site=#&menu=yes" target=" 
blank"> 在 线 客服 </a></td> </tr> 
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<tr><td><img src="http://wpa-qq-com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&guin=23132&site=#&menu=yes" target=" 
plank"> 在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&guin=23132&site=#&menu=yes" target=" 
blank"> 在 线 客服 </a></td> </tr> 

<tr><td><img src="http://wpa.qq.:com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&uin=23132gsite=#&menu=yes" 

target=" blank"> 在 线 客服 </a></td> </tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target=" blank"> 

在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target=" blank"> 

在 线 客服 </a></td> </tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target=" blank"> 

在 线 客服 </a></td> </tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target=" blank"> 

在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target=" blank"> 

在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes" target="_ 
blank"> 在 线 客服 </a></td></tr> </table> 

</div> 

<div><img src="qq bottom.gif" width="142" height="6"></div> 
</div> 

<div class="qqwid" id="showrightmenu 2" style="filter:alpha (opacity=80) ;z-index:1; 

margin-top:87px;display:none;" onmouseover="javascript:showrightmenuover (2);" 

onmouseout="javascript:showrightmenuout (2) ;"> 

<div><img src="qq top.png"></div> 

<div class="qqnei"> 

<table border="0" cellspacing="0" cellpadding="0" style="filter:alpha (opacity=86);"> 

<tr><td><img src="http://wpa.qq-.com/pa?p=1:23132:17" height="17" align="middle"> 

<a target=" blank" href="http://wpa.qq-:com/msgrd?v=3&uin=23132&site=#&menu=y 
es"> 在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a target=" blank" href="http://wpa.qq:com/msgrd?v=3&uin=23132&site=#&menu=y 
es"> 在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 
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<a target=" blank" href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes"> 
在 线 客服 </a></td></tr> 
</table></div> 


但 特效 案 


<div><img src="qq bottom.png" width="142" height="6"></div> 
</div> 
<div class="qqwid" id="showrightmenu 3" 

style="filter:alpha (opacity=80) ;z-index:1;margin-top:174px;display:none;" onmouseove 
r="javascript:showrightmenuover (3) ;" onmouseout="javascript:showrightmenuout (3) ?"> 

<div><img src="qq top.png"></div> 

<div class="qqnei"> 

<table border="0" cellspacing="0" cellpadding="0" style='"filter:alpha (opacity=90);"> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a target=" blank" href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes"> 

在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a target=" blank" href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=y 
es"> 在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a target=" blank" href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes"> 

在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a target=" blank" href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes"> 

在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a target=" blank" href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes"> 

在 线 客服 </a></td></tr> 

<tr><td><img src="http://wpa.qq.com/pa?p=1:23132:17" height="17" align="middle"> 

<a target=" blank" href="http://wpa.qq.com/msgrd?v=3&uin=23132&site=#&menu=yes"> 

在 线 客服 </a></td></tr></table> 

</div> 

<div><img src="qq bottom.png" width="142" height="6"></div> 

</div></td> 

<td valign="top"> 

<table width="10" border="0" cellspacing="0" cellpadding="0" id="rightmenu"> 

<tr><td><a href="javascript:" onmouseover="javascript:showrightmenuover (1);" 

onmouseout="javascript:showrightmenuout (1);"> 

<img src="qq Atuo.jpg" border="0"></a></td> </tr> 

<tr><td><a href="javascript:" onmouseover="javascript:showrightmenuover (2);" 

onmouseout="javascript:showrightmenuout (2) ;"> 

<img src="qq Adns.jpg" border="0" ></a></td></tr> 


<tr><td><a href="javascript:" onmouseover="javascript:showrightmenuover (3);" 
onmouseout="jJavascript:showrightmenuout (3);"> 


<img src="qq Beian.jpg" border="0"></a></td></tr> 
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<tr><td align="left"><a href="javascript:" onclick="javascript:divclose('right 


menu');"> 


<img src="close.jpg" border= 
</table> 
</td> 


></a></td> </tr> 


CE 
</table> 
</div> 
<script event="fscommand () ”for="eccoolad" type="text/javascript"></script> 
<script type="text/javascript"> 
Var lastscrollY=0; 
Var setup=0.02 
function heartBeat (){ diffY=document.documentElement.scrollTop; 
percent=setup* (diffY-lastscrollY); 
if (percent>0)percent=Math.ceil (percent); 
else percent=Math .floor (percent); 


document .getElementById("leftfu") .style.top=parseInt (document. 


getElementById ("leftfu") .style.top)+percent+"px"; 


document .getElementById("rightfu") .style.top=parseInt (document. 


getElementById ("rightfu") .style.top)+percent+"px"; 


lastSscrollY=lastscrollY+percent; } 

window.setInterval ("heartBeat ()",1); 

function divclose (name) {document .getElementById (name) .style.visibility='hidden'; } 
function showqqdivover (i) 

{document .getElementById ("showqq"+i) .style.display="block";} 

function showqqdivout (i) 

{document .getElementById ("showqq"+i) .style.display="none";} 

function showleftmenuover (id) 

{document .getElementById ("showleftmenu "+id) .style.display="block";} 
function showleftmenuout (id) 

{document .getElementById ("showleftmenu "+id) .style.display="none";} 
function showrightmenuover (id) 

{document .getELementBYId ("showrightmenu "+id) .style.display="block";} 
function showrightmenuout (id) 

{document .getElementByYId ("showrightmenu "+id) .style.display="none";} 
</script> 


] 片 广告 交 蔡 显示 : 
@ JavaScript 可 以 实现 多 个 Banner 图 片 广告 的 交替 显示 。 如 果 你 


的 网 站 广告 位 被 占 满 了 ， 可 以 考虑 让 多 个 图 片 广告 轮番 交替 显示 ， 其 链接 也 跟着 改变 ， 这 样 可 以 
节省 宝贵 的 广告 位 。 如 图 17-11 所 示 。 
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图 17-11 多 个 图 片 广告 交替 显示 
(1) 制作 时 ， 首 先 准备 3 幅 图 片 ， 分 别 命 名 为 wall_s1.jpg、wall_s2.jpg、wall_s3.jpg， 如 图 
17-12、 图 17-13、 图 17-14 所 示 。 


图 17-13 wall s2.jpg 
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二 


不 要 天 过 好 训 会 ~ 侈 惠 契合 招 而 ， 
图 17-14 wall s4.jpg 
(2) 打开 网 页 文档 ， 在 <head> 与 </head> 之 间 输 入 如 下 的 JavaScript 代 码 ， 


图 片 翻转 ， 如 图 17-15 所 示 。 


<script language="JavaScript" type="text/JavaScript"> 
站 

Var urlArray = new Array(3); 

Var banArray = new Array(3); 

var counter = 1; 


Var url = "http://URL1"; 


urlArray[0] = "http://URL1"; 
urlArray[1] = "http:// URL1"; 
urlArray[2] = "http:// URL1"; 


if (document .images) 
pi 
Eor(ld I05 1 < 3 it) 
{ 
banArray[i] = new Image (468, 60); 


banArray[i] .src = "wall s" + (i+1) + ".jpg"; 


F 
function changeBanner () 
{ 
if (counter > 2) 
counter = 0; 
document .banner.src = banArray[counter] .src; 
url = urlArray[counter]; 
counter++; 
} 
Var timer = window.setInterval ("changeBanner ()", 3000); 
WA 
</script> 


来 实现 多 幅 广 


(3) 在 网 页 <body> 与 </body> 之 间 适 当 的 位 置 输 入 如 下 代码 ， 用 来 显示 翻转 广告 图 片 ， 如 
17-16 所 示 。 
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图 17-15 输入 JavaScript 代 码 


<a href="#" onClick="window.open (url,'BannerWin') ;"> 


<img src="wall sl.jpg" border=0 name="banner"></a> 


[DW zien won gam SA Bam nao) wel ees ECW ee 而 .| 国 OleLx] 
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| 本 = 区 显示 小 图 
@ 如 图 17-17 和 图 17-18 所 示 ， 这 是 一 个 非常 不 错 的 JavaScript 图 


片 特 效 。 当 打开 网 页 的 时 候 ， 显 示 的 是 大 图 片 ， 就 像 遮 屏 广告 一 样 ， 在 停留 一 会 后 ， 它 会 自动 缓 
慢 收 起 ， 这 是 由 JavaScript 控 制 的 更 换 广告 图 片 特效 ， 它 能 始终 显示 在 网 页 顶部。 在 一 些 大 门户 
站 会 经 常见 到 这 种 效果 。 


新 蛋 / 大 仓 成 立 五 周年 庆 


全 面 免 运费 


数 干 款 产品 疯狂 特价 ， 保 证 线 上 行货 ! 


图 17-17 显示 大 图 
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图 17-18 显示 小 图 
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网 
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动 收 起 显示 


制作 时 要 先 准 备 两 幅 
小 图 的 实例 代码 如 下 。 


片 ， 一 幅 小 图 as.jpg， 一 幅 大 图 ab.jpg。 先 显示 大 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 先 显示 大 图 随后 自动 收 起 显示 小 图 的 js 广告 </title> 

<meta http-equiv="content-type" content="text/html;charset=gb2312"> 

<style type="text/css"> 

html,body{margin:0;text-align:center; font-size:12px;} 

img{border:none} 

p{margin:0px} 

</style> 

<script type="text/javascript"> 

Var showad = { 

curve: function(lty De dr sy '{ 

EE Ut Ve 2 I rotorn ce /2 4 tr 

returo ec A 2 * (== 2 tb 

}, 

fx: function(from, to, playtime, onend) { 

var me = this, 

who = this.adwrap, 

position = 0, 

changeval = to - from, 

curve = this.curve; 

playtime = playtime / 10; 

who.style.overflow = 'hidden'; 

function run() { 

if (position++<playtime) { 

who.style.height = math.max(l, math.abs (math.ceil(curve (position, from, 
changeval, playtime)))) + "pzx"; 

settimeout (_run, 10) 

} else { 

onend && onend.call (me, to) 

} 

}; 

_run() 

}, 

init: function(info) { 


var me = this, 
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